React-Native: Expo 在我添加 Picker 項目時停止

Question

我是 react-native 的新手，我正在嘗試使用 Picker 項目從下拉列表中進行選擇，我正在使用反應掛鈎將 Picker 項目設置為可選，但是當我添加代碼時 Expo 會在沒有警告的情況下停止：

const HomeScreen3 = observer(() => 
{
  const [ options, setOptions ] = useState([ { id:1, title:'Titulo 1' }, { id:2, title:'Titulo 2' } ]);
  const [ selectedOption, setSelectedOption ] = useState({ id:1, title:'Titulo 1' });

  useEffect(() => {
    console.log('component mounted');
   }, []);
  
  return (
    <View style={{flex: 1, backgroundColor: '#fff', padding:10, position:'relative' }}>
    <ScrollView showsHorizontalScrollIndicator={false}>
    <Picker
          itemStyle={{ backgroundColor: "white", color: "black", borderColor:'rgba(0,0,0,0.2)', fontSize:16,  }}
          mode="dropdown"
          selectedValue={selectedOption}
          onValueChange={(value) => { setSelectedOption( value)}}>
          
              {options.map((item, index) => {
                  return (<Picker.Item label={item} value={item} key={index}/>) 
              })}
            
      </Picker>
    </ScrollView>
  </View>

export default HomeScreen3;

Answer 1

首先，在 Expo SDK 38 中import { Picker } from 'react-native'; 不再按預期工作。

確保您使用import { Picker } from '@react-native-community/picker';

這是它的文檔： https://github.com/react-native-community/react-native-picker 。

其次，我看到的真正問題是您的代碼的問題是Picker.Item的問題，這里：

{options.map((item, index) => {
    return (<Picker.Item label={item} value={item} key={index}/>) 
})}

您正在發送label和item道具中的完整對象。 但是，查看實際文檔， label 接受字符串，值接受字符串或 integer - https://reactnative.dev/docs/picker-item

這意味着您的Picker代碼應如下所示：

<Picker
      itemStyle={{backgroundColor: "white", color: "black", borderColor:'rgba(0,0,0,0.2)', fontSize:16}}
      mode="dropdown"
      selectedValue={selectedOption}
      onValueChange={(value) => {setSelectedOption(value)}}>
          {options.map((item, index) => {
              return (<Picker.Item label={item.id} value={item.title} key={index}/>) 
          })}
  </Picker>

並且selectedOption應該只存儲項目的 id，如下所示：

const [ selectedOption, setSelectedOption ] = useState(1);

Answer 2

對於 expo 使用這對我有用，即使有警告但有效！

import { Picker } from 'react-native' 
// state
 const [picked, setPicked] = useState(1.15);

 <Picker
        selectedValue={picked}
        style={{ height: 50, width: 100 }}
        onValueChange={(itemValue, itemIndex) =>
          setPicked(itemValue)
        }>

        <Picker.Item label="Canda 5%" value={1.05} />
        <Picker.Item label="Japan 8%" value={1.08} />
        <Picker.Item label="USA 10%" value={1.10} />
        <Picker.Item label="Egypt 14%" value={1.14} />
        <Picker.Item label="Saudi Arabia 15%" value={1.15} />
        <Picker.Item label="China 16%" value={1.16} />
        <Picker.Item label="Algeria 17%" value={1.17} />
        <Picker.Item label="18%" value={1.18} />
        <Picker.Item label="German 19%" value={1.19} />
        <Picker.Item label="German 19%" value={1.20} />
      </Picker>