我如何利用下拉拾荒机在反应本地博览会？

Question

我的代码：

import { TouchableOpacity, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { auth } from '../firebase'
import { useNavigation } from '@react-navigation/core'
import { signOut } from 'firebase/auth'
import DropDownPicker from 'react-native-dropdown-picker'

const HomeScreen = () => {

  const navigation = useNavigation()
  const handleSignOut = async () =>{
    try{
      await signOut(auth)
      console.log("Signed out successfully")
      navigation.replace("Login")
    }catch (error) {
      console.log({error});
   }
  }
  return (
    <View style = {styles.container}>
      <Text>Welcome {auth.currentUser?.email}</Text>
      <Text></Text>
      <Text>What cusine would you like to eat today?</Text>
      <DropDownPicker
          items={[
              {label: 'English', value: 'en'},
              {label: 'Deutsch', value: 'de'},
              {label: 'French', value: 'fr'},
          ]}
          defaultIndex={0}
          containerStyle={{height: 40}}
          onChangeItem={item => console.log(item.label, item.value)}
      />
      <TouchableOpacity
      onPress={handleSignOut}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Sign Out</Text>
      </TouchableOpacity>
    </View>
    
  )
}

我使用https://snack.expo.dev/a6rDxpeU_作为参考。下拉拾取器应该如下所示：

​

但我的屏幕上什么都没有。我的屏幕上没有来自世博应用程序或我的终端的错误或警告：

​

还是我在这里做错了什么？我已经完成了导入，它是import DropDownPicker from 'react-native-dropdown-picker'，在导入之前，我已经完成了根文件夹中的安装，这是来自https://hossein-zare.github.io/react-native-dropdown-picker-website/docs的npm install react-native-dropdown-picker。我还检查了在我的package.json中，我有以下依赖项：

​

我尝试通过https://www.youtube.com/watch?v=C01CJlu7Q-I传递在下拉选择器中选择的数据。

import { TouchableOpacity, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { auth } from '../firebase'
import { useNavigation } from '@react-navigation/core'
import { signOut } from 'firebase/auth'
import DropDownPicker from 'react-native-dropdown-picker'
import { useEffect, useState } from 'react'

const HomeScreen = () => {

  const navigation = useNavigation()

  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
             {label: 'Japanese', value: 'J'},                  
             {label: 'Korean', value: 'K'},
             {label: 'Western', value: 'F'},
             {label:'Indonesian', value:'I'},
             {label: 'Taiwan', value: 'T'},
             {label:'Chinese', value:'C'},
            ]);
  const handleSignOut = async () =>{
    try{
      await signOut(auth)
      console.log("Signed out successfully")
      navigation.replace("Login")
    }catch (error) {
      console.log({error});
   }
  }
  
  return (
    <View style = {styles.container}>
      <Text>Welcome {auth.currentUser?.email}</Text>
      <Text></Text>
      <Text>What cusine would you like to eat today?</Text>
      <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
    <TouchableOpacity
        onPress={() => navigation.navigate("SubScreen1", {paramKey:items})}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Search</Text>
      </TouchableOpacity>

      <TouchableOpacity
      onPress={handleSignOut}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Sign Out</Text>
      </TouchableOpacity>
    </View>
    
  )
}

但是当我点击“搜索”按钮时，它不会跳到下一页。我认为钥匙的传递有问题。我该怎么解决这个问题？

Answer 1

请试试看。希望能成功。

import DropDownPicker from 'react-native-dropdown-picker';

function HomeScreen() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
             {label: 'English', value: 'en'},                  
             {label: 'Deutsch', value: 'de'},
             {label: 'French', value: 'fr'},
               ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
  );
}

您可能会发现这很有用：本机反应:下拉链接