状态参数在反应导航中变得未定义答案

【问题标题】：State params getting undefined in react-navigation状态参数在反应导航中变得未定义
【发布时间】：2019-09-26 12:47:17
【问题描述】：

当我尝试在 componentDidMount() 中使用导航执行 setParams 并尝试在 static navigationOptions = {} 中访问但它没有在导航状态对象中设置参数并且未定义。

我目前使用的是以下版本

反应导航 3.9.1

react-native 与 EXPO SDK 32.0 一起使用

ManTabNavigator.js

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Service: { screen: ServiceListScreen },
}, {
  initialRouteName: 'Home',
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      type={'MaterialIcons'}
      name={'home'}
    />
  ),

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
}, {
  initialRouteName: 'HomeStack',
  activeColor: '#19CF86',
  inactiveColor: 'rgba(0, 0, 0, 0.3)',
  barStyle: { backgroundColor: '#ffffff' },
});
};

ServiceListScreen.js

class ServiceListScreen extends Component {
  static navigationOptions = {
    header: ({ navigation }) => {
      return (
        <Header>
          <ServiceTab
            services={{}}
          />
        </Header>
      )
    }
  };

  _setNavigationParams() {
    let title = 'Form';
    this.props.navigation.setParams({
      title,
    });
  }

  componentDidMount() {
    this._setNavigationParams();
  }

  render() {
    const { selectedService } = this.props;
    return (
      <KeyboardAwareScrollView>
        <SafeAreaView
          // style={styles.container}
          forceInset={{ top: 'always' }}
        >
          <View style={{ flex: 1 }}>
            <SubServiceList
              selectedService={selectedService}
            />
          </View>
        </SafeAreaView>
      </KeyboardAwareScrollView>
    );
  }
}

ServiceListScreen.propTypes = {
  services: PropTypes.object,
  selectedService: PropTypes.object,
  // actions
};

const mapStateToProps = (state, ownProps) => {
  return {
    services: getAllServices(state),
    selectedService: getSelectedServices(state),
  };
}
export default compose(
  withNavigation,
  connect(mapStateToProps),
)(ServiceListScreen);

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

navigationOptions 与navigation params 不同。如果您不需要动态设置标题，您可以这样做：

static navigationOptions = {
  title: 'Form',
  header: () => (
    <Header>
      <ServiceTab services={{}} />
    </Header>
  )
}

如果您确实需要访问navigation params，请这样做：

static navigationOptions = ({ navigation }) => ({
  title: navigation.getParam('title', ''), // fallback to empty string
  header: () => (
    <Header>
      <ServiceTab services={{}} />
    </Header>
  )
})

【讨论】：

我只需要动态设置。
我的第二个例子展示了它是如何动态完成的。

【解决方案2】：

这就是我使用导航选项的方式

static navigationOptions = ({ navigation }) => {
       return {
           title: navigation.state.params.type ? navigation.state.params.type : 'Members',
           headerStyle: {
               backgroundColor: Colors.primaryColor,
           },
           headerTintColor: Colors.white,
           headerTitleStyle: {
               fontWeight: 'bold',
           },
           headerMode: 'float',
           headerLeft: <Icon
               onPress={() => navigation.goBack()}
               name="arrow-back"
               type='MaterialIcons'
               style={{ color: 'white', marginLeft: 10 }}
           />,
       }
   }

确保您从导航中正确获取参数

格式：title: navigation.state.params.title

【讨论】：