我本人在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}
    />

这篇关于我本人在React Native的功能组件中实现CustomPicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！