Question

从状态（redux）开始，我试图更新topBar标题（这是一个react-native-navigation组件）。但是我做不到。在我的HomeScreen.tsx中，我尝试通过react组件对其进行更新，但出现错误：

TypeError: undefined is not an object (evaluating 'props.navigation.setParams')

访问状态和更新React-Native-Navigation选项的正确方法是什么？

我正在使用：

react-native-navigation v。6.7.2
本机：0.62.2

在我注册主屏幕的第一个文件App.ts下面，然后在HomeScreen.tsx具有选项设置的React组件下面更新堆栈标题。

// App.ts

import { Navigation } from 'react-native-navigation';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import { withReduxProvider } from './store';
import HomeScreen from './HomeScreen';

const Screens = new Map<string, React.FC<any>>();
Screens.set('home', HomeScreen);

// Register screens
Screens.forEach((C, key) => {
  Navigation.registerComponent(
    key,
    () => gestureHandlerRootHOC(withReduxProvider(C)),
    () => C,
  );
});

export const startApp = () => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name:'home',
            },
          },
        ],
      },
    },
  });
};

// HomeScreen.tsx

import React from 'react';
import { View, Text } from 'react-native';
import { useSelector } from 'react-redux';

const HomeScreen = (props) => {
  const globalSettings = useSelector((s: GlobalState) => s.globalSettings);

  // --> Below, from the state I want to update the topBar title.
  // But I'm getting instead "TypeError: undefined is not an object
  // (evaluating 'props.navigation.setParams')"
  props.navigation.setParams({
    topBar: {
      title: {
        text: globalSettings.updatedTitle,
      },
    },
  });

  return (
    <View>
      <Text>{globalSettings.updatedTitle}</Text>
    </View>
  );
};

HomeScreen.options = {
  topBar: {
    title: {
      text: 'Default title',
    },
  },
};

export default HomeScreen;

反应本机导航：如何从状态更新本机导航选项？

0 个答案: