反应原生导航 5 传递更新的组件

Question

我是反应原生及其导航模块的新手。我有一个简单的dashboard.js 文件，我正在使用tab navigator 像这样 -

 <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 组件中轻松获取它。

但是，在我的 dashboard 组件中，我还有一个方法可以运行每个 1 minute 并更新 user 道具。

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

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

而且效果很好。但是有了react-navigation 5，它就不再工作了。

如果有人知道，请帮助我。请。

非常感谢。

Answer 1

根据文档，初始道具似乎也是一个常数，您必须使用 redux 或 context api 来更新选项卡中的徽章计数，所以我认为采用这种方法来处理这个问题会更好。想出了一个计数更改方案，就像您使用上下文 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>
  );
};

这样你可以跳过导航参数，直接发送数据到标签页，这些数据也可以从其他标签页或树的某个地方读取。

您可以在此处查看完整的小吃 https://snack.expo.io/@guruparan/5c2b97