React Native React Navigation中通过导航器传函数Prop失败求助

核心问题分析 #

1. React Native 事件参数差异：NativeBase的Input组件onChange事件传递的不是Web端的Event对象，原代码中e.target.value的写法完全错误。
2. initialParams 不响应状态更新：initialParams仅在组件首次挂载时传递参数，当App组件的value状态更新时，Location组件无法自动获取最新值。
3. useState 异步更新导致日志延迟：直接在handlechange中打印value会输出旧值，因为setvalue是异步操作。

修复后的代码 #

App.js #

import React,{useState} from "react";
import { NativeBaseProvider } from "native-base";
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import HomeScreen from "./Comp/HomeScreen";
import { NavigationContainer } from "@react-navigation/native";
import Location from "./Comp/Location";

export default function App() {
  const [api, setapi] = useState(process.env.REACT_APP_API_KEY)

  const api_1 = () => {
    setapi(process.env.REACT_APP_API_KEY_2)
  }
  const api_2 = () => {
    setapi(process.env.REACT_APP_API_KEY_3)
  }

  const [value, setvalue] = useState("London")
  // 修正事件参数，直接接收输入值
  const handlechange = (inputValue) => {
    setvalue(inputValue)
    // 直接打印新值，避免异步延迟问题
    console.log('value :>> ', inputValue);
  }
  const Tab = createMaterialBottomTabNavigator();
  return (
    <NativeBaseProvider>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
          {/* 使用render prop传递实时更新的props，替代initialParams */}
          <Tab.Screen 
            name="Location" 
            children={() => <Location value={value} change={handlechange} />} 
          />
        </Tab.Navigator>
      </NavigationContainer>
    </NativeBaseProvider>
  );
}

Location.js（原Component.js） #

import { Center, Input, Text } from 'native-base'
import React from 'react'
import { ImageBackground } from 'react-native'
import BG from "./Img/BG.png"

// 直接接收props，无需从route.params获取
export default function Location({ change, value }) {
    return (
        <ImageBackground source={BG} style={{flex:1}}>
            <Center minH={"100%"} w={"90vw"} alignSelf={"center"}>
                {/* 使用NativeBase Input的onChangeText事件（更符合RN习惯） */}
                <Input 
                    color={"white"} 
                    size="xl" 
                    onChangeText={change} 
                    value={value}
                    variant="rounded" 
                    placeholder="Enter Location" 
                />
                <Text color={"white"}>{value}</Text>
            </Center>
        </ImageBackground>
    )
}

关键修改说明 #

• 事件处理修正：改用onChangeText（React Native生态中处理输入的标准事件），直接接收输入的文本值，替代原错误的Web端事件写法。
• 实时props传递：用children render prop替代initialParams，确保App组件的状态更新能实时同步到Location组件。
• 日志修正：直接打印事件传递的新值，避免useState异步更新导致的旧值打印问题。
• 布局修复：给ImageBackground添加style={{flex:1}}，确保背景图铺满屏幕，避免布局异常。

内容的提问来源于stack exchange，提问作者Aryan Rajput