我本人在React Native的功能组件中实现CustomPicker

本文介绍了我本人在React Native的功能组件中实现CustomPicker的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

请告诉我 如果我想将CustomExample类组件更改为功能组件

Please tell me that if I want to change the CustomExample Class component into a functional component

**为:** const CustomExample =()=> {...}

**as: ** const CustomExample = () =>{...}

然后如何将以下代码更改为以类似方式工作:

then how will change the following code to work in similar manner:

<CustomPicker placeholder={'Please select your favorite item...'} options={options} getLabel={item => item.label} fieldTemplate={this.renderField} optionTemplate={this.renderOption} />

我尝试了以下方法:

将定义更改为将 rederField(settings){...} 转换为 const renderField =(settings)=>{...} 然后将renderField分配给fieldTemplate，如下所示:

changing definition as rederField(settings){...} to const renderField = (settings) => {...} and then assigning renderField to fieldTemplate as follow:

* fieldTemplate={renderField()} * fieldTemplate={()=>renderField()} * fieldTemplate={renderField(selectedItem,defaultText,getLabel,clear)}

每次尝试都显示一些错误.

on each attempt it showed some error.

PLZ帮助我在过去的几天里一直坚持下去 遍历所有DOCS对我来说要花几个月的时间.

PLZ HELP ME I'M STUCK ON IT FROM LAST FEW DAYS GOING THROUGH ALL THE DOCS WILL TAKE MONTHS FOR ME.

import * as React from 'react' import { Alert, Text, View, TouchableOpacity, StyleSheet } from 'react-native' import { CustomPicker } from 'react-native-custom-picker' export class CustomExample extends React.Component { render() { const options = [ { color: '#2660A4', label: 'One', value: 1 }, { color: '#FF6B35', label: 'Two', value: 2 }, ] return ( <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}> <CustomPicker placeholder={'Please select your favorite item...'} options={options} getLabel={item => item.label} fieldTemplate={this.renderField} optionTemplate={this.renderOption} /> </View> ) } renderField(settings) { const { selectedItem, defaultText, getLabel, clear } = settings return ( <View style={styles.container}> <View> {!selectedItem && <Text style={[styles.text, { color: 'grey' }]}>{defaultText}</Text>} {selectedItem && ( <View style={styles.innerContainer}> <TouchableOpacity style={styles.clearButton} onPress={clear}> <Text style={{ color: '#fff' }}>Clear</Text> </TouchableOpacity> <Text style={[styles.text, { color: selectedItem.color }]}> {getLabel(selectedItem)} </Text> </View> )} </View> </View> ) } renderOption(settings) { const { item, getLabel } = settings return ( <View style={styles.optionContainer}> <View style={styles.innerContainer}> <View style={[styles.box, { backgroundColor: item.color }]} /> <Text style={{ color: item.color, alignSelf: 'flex-start' }}>{getLabel(item)}</Text> </View> </View> ) } } // STYLE FILES PRESENT HERE.

推荐答案

将函数的定义更改为

function renderOption(settings) {...} function renderField (settings) {...}

并调用这样的函数.

<CustomPicker placeholder={'Please select your favorite item...'} options={options} getLabel={item => item.label} fieldTemplate={renderField} optionTemplate={renderOption} />