反应本机导航 5 传递更新的组件

Question

我是 React Native 及其导航模块的新手。我有一个简单的 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 或上下文 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

反应本机导航 5 传递更新的组件

React native navigation 5 passing updated component

react-native

react-native-navigation