Как передать родительскую функцию на дочерний экран в React Navigation 5? - PullRequest
Новая
       44

Как передать родительскую функцию на дочерний экран в React Navigation 5?

1 голос
/ 31 марта 2020

Недавно я начал использовать React Native 0.61.5 и навигацию React 5.x. Теперь мне нужно передать родительскую функцию на дочерний экран. Например, я хочу изменить значок панели навигации, нажав кнопку на вкладке TabNavigator, вложенной в StackNavigator. Ранее (навигационная версия 3.x) я использовал getActiveChildNavigationOptions для своих нужд, но теперь он удален. Поэтому единственный способ достичь этой цели - передать пользовательские функции дочерним компонентам.

Вот пример кода, который я хочу изменить с XXXXXXXX на YYYYYYYYY: 

const TabA = ({ route }) => (
  <View>
    <Text>Tab A</Text>
      <Button 
        title="Change header"
        onPress={() => route.params.setHeaderRightName("YYYYYYYYY")}/>
  </View>
)

const TabB = () => <><Text>Tab B</Text></>

const Tabs = createBottomTabNavigator();
const TabsNavigator = ({ navigation }) => {
  const [headerRightName, setHeaderRightName] = useState("XXXXXXXX");

  useLayoutEffect(() => navigation.setOptions({
    headerRight: () => <MyNavIcon name={headerRightName}/>
  }), [headerRightName]);

  return (
    <Tabs.Navigator>
      <Tabs.Screen name="tab-a" component={TabA} initialParams={{ setHeaderRightName }} />
      <Tabs.Screen name="tab-b" component={TabB} />
    </Tabs.Navigator>
  );
}

const Stack = createStackNavigator();
export default App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="tabs" component={TabsNavigator} />
      <Stack.Screen name="another-screen" component={AnotherScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

Все работает нормально, но я получаю это предупреждение:

enter image description here

Полный текст: 

Non-serializable values were found in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.

Так как можно Я передаю функцию от родителя к потомку, если в предупреждении говорится, что я не могу передать функцию с помощью параметров маршрута?

1 Ответ

0 голосов
/ 01 апреля 2020

Страница документации, на которую указывает ссылка в предупреждении, гласит:

Если вы не используете постоянство состояния или глубокую ссылку на экран, который принимает функции в параметрах, тогда вы можете игнорировать предупреждение. Чтобы игнорировать его, вы можете использовать YellowBox.ignoreWarnings.

Так что, в моем случае, я могу игнорировать это предупреждение и безопасно передавать функции через параметры маршрута. 

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
  'Non-serializable values were found in the navigation state',
]);
...