Question

我正试图将term从HomeStackScreen传递到HomeScreen函数中，该函数曾经用于在HomeStack中创建.Screen。我尝试过将它作为道具和HomeStack.Screen中的初始参数传递。我可以更改状态，并可以通过下面的console.log()进行确认。好像是我的Home组件在创建后没有重新渲染/更新，但是我不确定如何强制执行此更新。我不确定我缺少什么逻辑，如果有人能够指出正确的方向，我将不胜感激。

我已经包括了我的代码，控制台的实际输出以及我认为我在下面的控制台中编写的内容。

任何提示或指示都将非常有用。提前致谢。


    import React, {useState}from 'react';
    import {createStackNavigator} from '@react-navigation/stack';
    import Home from '../screens/home';
    import HeaderLeft from '../components/headerLeft';
    import HeaderRight from '../components/headerRight';


    function HomeScreen({term}) {
        console.log('Made it here!'.concat(term))
        return (
            <Home />
        );
    }

    const HomeStack = createStackNavigator();

    function HomeStackScreen() {
        const [term, setTerm] = useState('First State');

        console.log(term);

        return (
            <HomeStack.Navigator>
                <HomeStack.Screen name=" " 
                component= {HomeScreen} initialParams = {{term}}
                    options = {{
                        headerStyle:{
                            backgroundColor: "#121212",
                            borderBottomColor:'#121212', 
                            height:105,
                            shadowColor:'transparent'
                        },
                        headerLeft: () => <HeaderLeft/>,
                        headerRight: () => <HeaderRight setTerm = {setTerm}/>,
                    }}/>
          </HomeStack.Navigator>
        )
    }

    export default HomeStackScreen;

控制台：

First State
Made it here!undefined
Second State

我以为我在控制台上写的内容：

First State
Made it here!First State
Second State
Made it here!Second State

Answer 1

假设您使用的是react-navigation v5，则可以通过here

来更改传递参数。

在

`function HomeScreen({term}) {
        console.log('Made it here!'.concat(term))
        return (
            <Home />
        );
    }`

您可以将其更改为

`function HomeScreen({route: {
  params: { term },
},}) {
  console.log('Made it here!'.concat(term))
  return (
    <Home />
  );
}`

Answer 2

可以在route.params对象内部访问初始的Params属性

route.params

示例：

  function HomeScreen({ navigation, route }) {
        console.log('Made it here!'.concat(route.params.term))
        return (
            <Home />
        );
    }

示例2：

https://snack.expo.io/BRK9_n_Dj

有没有办法将状态传递给作为道具传递的组件？

2 个答案: