反应原生。 如何将 state 从组件传递到 BottomTab.Screen？

Question

我在本机反应中使用“底部标签导航”进行导航。 代码示例

<BottomTab.Screen
    name="Home"
    component={RootPasswordsHandler}
    options={(): {
      tabBarIcon: ({ color }: { color: any }) => JSX.Element;
      headerRight: () => JSX.Element;
      title: string;
    } => ({
      title: globalState.languageHandler.screenNames.HOME_SCREEN,
      tabBarIcon: ({ color }): JSX.Element => <TabBarIcon name="home" color={color} />,
      headerRight: (): JSX.Element => (
        <TextInput style={styles.navStyles.input} placeholder={globalState.languageHandler.generic.FIND_PASSWORD} />
      ),
    })}
  />

在组件“RootPasswordsHandler”中，组件从数据库中获取密码，将它们保存在本地 state ( useState ) 并渲染它们。 我想添加输入（如上面的代码示例），它将访问该数据并过滤密码数组。 我怎样才能做到这一点？ 我对本机反应很陌生，我完全被困在这里：/

Answer 1

您可以在组件中使用setOptions ，然后在BottomTab中访问它们

文档中的示例查看value是如何传递的！

function ProfileScreen({ navigation, route }) {
  const [value, onChangeText] = React.useState(route.params.title);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: value === '' ? 'No title' : value,
    });
  }, [navigation, value]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={onChangeText}
        value={value}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}