我要在我的功能组件中实现 CustomPicker 以响应本机

Question

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

**如：** const CustomExample = () =>{...}

那么如何更改以下代码以类似方式工作：

<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，如下所示：

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

每次尝试都会显示一些错误。

PLZ 帮助我，我最近几天一直坚持使用它
浏览所有文档对我来说需要几个月的时间。

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.

Answer 1

将函数定义改为

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

并像这样调用函数。

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

我要在我的功能组件中实现 CustomPicker 以响应本机

I was to implement CustomPicker in my functional component in react native

javascript

picker

jsx

reactjs

react-native