Picker.Item 未定义本机反应

Question

我在我的项目中实现了 https://github.com/react-native-picker/picker 作为我自己的组件。为了在选择器中有动态数量的项目，我决定用 MyPicker.Item:

做这样的事情

import { MyPicker } from '../Common/MyPicker.component';


<MyPicker
   style={styles.picker}
   selectedValue={this.state.selectedItem}
   onValueChange={(itemValue) =>
     this.setState({selectedItem: itemValue})}>
   <MyPicker.Item label='dziewczynka' value='dziewczynka' color='black' />
   <MyPicker.Item label='chłopiec' value='chłopiec' color='black' />
</MyPicker>

这就是 MyPicker 的样子：

import React, { Component } from 'react';
import {
    View
  } from 'react-native';
import {Picker} from '@react-native-picker/picker';
import styles from './MyPicker.component.style';

export function MyPicker(props) {
    return (
        <View style={styles.container}>
            <Picker
                onValueChange={(itemValue) =>
                    props.onValueChange(itemValue)}
                mode={'dropdown'}>
                {props.children}
            </Picker>
        </View>
        
    )
}

它正在工作，我可以 select 这个项目，它返回正确的值，但我收到这个警告和它的刺激性。我该如何处理？

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Answer 1

您的代码中没有 MyPicker.Item 的定义 - 看起来您实际上只想重用 Picker.Item 中定义的那个。一种可能的方法：

import {Picker} from '@react-native-picker/picker';
// ...

function MyPicker(props) {
    return (
        <View style={styles.container}>
            <Picker
                onValueChange={(itemValue) =>
                    props.onValueChange(itemValue)}
                mode={'dropdown'}>
                {props.children}
            </Picker>
        </View>
    )
}

MyPicker.Item = Picker.Item;
export { MyPicker };

Picker.Item 未定义本机反应

Picker.Item undefined react native

picker

react-native

react-native-picker