'UI-Kitten' Select 组件未呈现值

Question

我正在使用 UI-kitten 和 formik 的 React naitve 来构建注册表单。我在 formik 中使用 ui kitten 的 select 组件。我无法从组件中获取 selected 值。它为我提供了 selected 项 (in console.warn()) 的索引，而 selected 项没有出现在该字段中。它适用于输入和 datePicker 组件。

    const formSchema = yup.object({
    name: yup.string().required("*Full Name is required"),
    gender: yup.string().required("*Gender is required"),
    dob: yup.string().required("*Date of birth is required"),})

    export default class Registration extends Component {
    render() {
        return (
            <Formik
                validationSchema={formSchema}
                initialValues={{
                    name: '',
                    gender: '',
                    dob: '',
                }}
                onSubmit={(values) => {
                    console.log(values)
                }}
            >
                {(props) => (

                    <ScrollView style={styles.containerStyle}>
                        <LinearGradient style={{ height: '100%' }}
                            colors={["#0C1248", "#D03737"]}>
                            <ScrollView contentContainerStyle={styles.scrollViewStyle}>
                                <Text style={styles.textStyle} category='h2'>Registration</Text>
                                <Input
                                    style={styles.inputView}
                                    value={props.values.name}
                                    status='primary'
                                    placeholder="Full Name"
                                    onChangeText={props.handleChange('name')}
                                />

                                <Text style={styles.errorText}>{props.touched.name && props.errors.name}</Text>

                                <Datepicker
                                    style={styles.inputView}
                                    date={props.values.dob}
                                    placeholder="Date of birth"
                                    onSelect={(dob) => { props.setFieldValue('dob', dob) }}
                                />

                                <Text style={styles.errorText}>{props.touched.dob && props.errors.dob}</Text>

                                <Select
                                    style={styles.inputView}
                                    value={props.values.gender}
                                    placeholder='Gender'
                                    onSelect={item => props.setFieldValue(
                                       'gender', item.value
                                    )}
                                >
                                    <SelectItem title='Male' />
                                    <SelectItem title='Female' />
                                </Select>

                              

                                <TouchableOpacity style={{ alignItems: "center", justifyContent: 'center' }}>
                                    <LinearGradient style={{ width: width / 1.25, padding: 12, borderRadius: 30 }}
                                        colors={["#D03737", "#0C1248"]}>
                                        <Text style={{ color: "white", textAlign: "center" }} onPress={props.handleSubmit}>Next</Text>
                                    </LinearGradient>
                                </TouchableOpacity>
                            </ScrollView>
                        </LinearGradient>
                    </ScrollView>

                )}
            </Formik>
        );
    }
}

Answer 1

你应该参考文档 https://akveo.github.io/react-native-ui-kitten/docs/components/select/overview#select

select 组件确实有一个值属性，它有一个 selectedIndex 属性，它将选择给定索引上的项目。

对于你的情况，你可以这样做

<Select
style={styles.inputView}
value={props.values.gender}
placeholder='Gender'
onSelect={item => props.setFieldValue(
'gender', item.row == 0 ? 'Male' : 'Female'
)}
>
<SelectItem title='Male' />
<SelectItem title='Female' />
</Select>

根据状态值，您可以找到索引，反之亦然。这将确保 Select 始终获得索引值并且您的状态始终具有字符串。

Answer 2

我创建了函数“getSelectValue”来处理多个和单个 select。这是 UIKittenDocs 中针对 Multiselect 稍作修改的 example code，但您只需从 Singleselect.[=12 的 Select 组件中删除属性 =]

import React from 'react';
import { StyleSheet } from 'react-native';
import { IndexPath, Layout, Select, SelectItem } from '@ui-kitten/components';

export const TAGS = [
  'Handwerk',
  'Bio',
  'Vegetarisch',
  'Vegan',
  'Glutenfrei',
  'Laktosefrei',
  'Natürlich'
];

function getSelectValue(selectedIndexPaths, options) {
  if (selectedIndexPaths.length) {
    // multiSelect
    return selectedIndexPaths
    .map((indexPath) => options[indexPath.row])
    .join(', ');
  } else {
    // singleSelect
    return options[selectedIndexPaths.row]
  }
}

export const SelectMultiSelectShowcase = () => {

  const [selectedTags, setSelectedTags] = React.useState([
    new IndexPath(0),
    new IndexPath(1),
  ]);

  return (
    <Layout style={styles.container} level='1'>
      <Select
        value={getSelectValue(selectedTags, TAGS)}
        multiSelect
        selectedIndex={selectedTags}
        onSelect={setSelectedTags}
      >
        {TAGS.map((tag, index) => 
          <SelectItem key={index} title={tag} />
        )}
      </Select>
    </Layout>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 128,
  },
});

'UI-Kitten' Select 组件未呈现值

'UI-Kitten' Select Component not rendering value

react-native

formik

react-native-ui-kitten