React本机导航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。我可以通过Order在route.params组件中轻松获取它。

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

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

<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