React Native Expo中DropDownPicker不显示及页面跳转失败问题求助

一、下拉框不显示的修复方案 #

你的代码核心问题是父容器未设置flex布局导致组件被挤压或处于可视区域外，同时组件样式配置不完整。

关键调整点： #

• 根<View>的样式必须设置flex: 1，让容器占满屏幕空间
• 给DropDownPicker同时配置containerStyle（外层容器）和style（组件本身），明确高度和背景样式
• 对于v5+版本的组件，状态绑定逻辑正确，但需补充占位提示和下拉框样式提升可见性

二、页面跳转失败的修复方案 #

跳转失败大概率是导航栈未正确注册SubScreen1或路由名称拼写错误（大小写敏感）。另外你原本传递的是全部选项列表，实际应该传递选中的value更合理。

关键调整点： #

• 检查导航配置文件，确保SubScreen1已在Stack.Navigator中注册，且路由名称与navigation.navigate中的完全一致
• 跳转前增加选中判断，避免空值跳转，同时传递选中的value作为参数

修正后的完整代码 #

import { TouchableOpacity, StyleSheet, Text, View } from 'react-native'
import React, { useState } 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 [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 style={styles.spacer}></Text>
      <Text>What cuisine would you like to eat today?</Text>
      
      {/* 修复后的下拉框 */}
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        containerStyle={{height: 50, marginVertical: 15, width: '100%'}}
        style={{backgroundColor: '#fafafa'}}
        dropDownStyle={{backgroundColor: '#fafafa'}}
        placeholder="Select cuisine"
      />

      {/* 修复后的跳转按钮 */}
      <TouchableOpacity
        onPress={() => {
          if (value) {
            navigation.navigate("SubScreen1", {selectedCuisine: value})
          } else {
            alert('Please select a cuisine first')
          }
        }}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Search</Text>
      </TouchableOpacity>

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

// 补充必要的样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  spacer: {
    height: 10,
  },
  button: {
    backgroundColor: '#0782F9',
    width: '100%',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
    marginTop: 10,
  },
  signOutButton: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: 'white',
    fontWeight: '700',
    fontSize: 16,
  },
})

export default HomeScreen

额外检查项 #

1. 确认导航配置已注册SubScreen1，示例配置：

// 导航配置文件（如App.js）
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import SubScreen1 from './screens/SubScreen1';
import LoginScreen from './screens/LoginScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="SubScreen1" component={SubScreen1} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. Expo环境建议使用react-native-dropdown-picker v5.x版本，避免高版本兼容性问题
3. 确保已安装依赖：npm install react-native-dropdown-picker react-native-gesture-handler

内容的提问来源于stack exchange，提问作者L.Calvin