Question

当我尝试在componentDidMount（）中使用导航进行setParams并尝试在static navigationOptions = {}中进行访问时，但没有在导航状态对象中设置参数并得到未定义。

我当前正在使用以下版本

反应导航3.9.1

与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);

Answer 1

这就是我使用NavigationOptions

的方式

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

Answer 2

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 个答案: