反应原生导航 5 传递更新的组件 [英] React native navigation 5 passing updated component

问题描述

我是 React Native 及其导航模块的新手.我有一个简单的 dashboard.js 文件，我在其中使用了这样的 tab navigator -

I am new to react native and its navigation modules. I have a simple dashboard.js file where I am using tab navigator like this -

 <Tabs.Navigator tabBarOptions={{ activeTintColor: '#ff5757' }}>
    <Tabs.Screen
       options={{
       tabBarIcon: ({ color }) => 
        <Icon name='star-border' size={30} padding={15} color={color} />,}}
        name={'Orders'}
        component={Order}
        initialParams={{user}}
   />
<Tabs.Screen
component= {AnotherComponent}
/>

如您所见，我正在传递 InitialParams ，其中我有 user 道具.我可以通过 route.params 在 Order 组件中轻松获取它.

As you can see I am passing InitialParams where I have user props. And I can easily get it in Order component by route.params.

但是，在我的 dashboard 组件中，我还有一个方法，它每 1 分钟 运行一次并更新 user 道具.

However, in my dashboard component I also have a method that runs every 1 minute and updates user props.

我无法在 Order 组件中获取 user 道具的更新值.我坚持了2天.过去我是这样做的 -

I can't get the updated value of user props in Order component. I am stuck with this for 2 days. In the past I have done like this -

<Tabs.Screen
component = {() => <SomeComponent props= {props}/>}

而且效果很好.但是使用 react-navigation 5 它不再起作用.

And it worked fine. But with react-navigation 5 its not working any more.

如果有人知道，请帮助我.请LZ.

Please help me if anyone knows. plz.

非常感谢.

推荐答案

初始 props 似乎也是一个常量，根据文档，您必须使用 redux 或 context api 来更新选项卡中的徽章计数，所以我认为它采取这种方法来处理这个问题会更好.使用上下文 API 想出一个计数变化场景，就像您的场景一样.

The initial props seems to be a constant also as per the documentation you have to use redux or context api to update the badge counts in the tabs so I think it will be better to take that approach to handle this problem. Came up with a count changing scenario just like yours using context API.

const CountContext = React.createContext(0);

function HomeScreen() {
  return (
    <View>
      <CountContext.Consumer>
        {value => <Text>Home! {value}</Text>}
      </CountContext.Consumer>
    </View>
  );
}

const MyTabs = () => {
  const [count, setCount] = React.useState(0);

  return (
    <CountContext.Provider value={count}>
      <View style={{ flex: 1 }}>
        <Text>{count}</Text>
        <Button title="count" onPress={() => setCount(count + 1)} />
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} options={{ title: 'My home' }} />
          <Tab.Screen name="Settings"  component={SettingsScreen} options={{ title: 'My home 2' }} />
        </Tab.Navigator>
      </View>
    </CountContext.Provider>
  );
};

通过这种方式，您可以跳过导航参数并将数据直接发送到选项卡，并且可以从其他选项卡或树下的某个位置读取这些数据.

This way you can skip the navigation params and directly send data to the tab, and this data can be read from other tabs or somewhere down the tree as well.

你可以在这里查看完整的小吃https://snack.expo.io/@guruparan/5c2b97

You can check the full snack here https://snack.expo.io/@guruparan/5c2b97

这篇关于反应原生导航 5 传递更新的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！