相关疑难解决方法(0)

例如,当你有一个表单组件,并且需要使用导航栏中的按钮提交组件状态的一部分时,如何处理案例？

const navBtn = (iconName, onPress) => (
  <TouchableOpacity
    onPress={onPress}
    style={styles.iconWrapper}
  >
    <Icon name={iconName} size={cs.iconSize} style={styles.icon} />
  </TouchableOpacity>
)

class ComponentName extends Component {

  static navigationOptions = {
    header: (props) => ({
      tintColor: 'white',
      style: {
        backgroundColor: cs.primaryColor
      },
      left: navBtn('clear', () => props.goBack()),
      right: navBtn('done', () => this.submitForm()), // error: this.submitForm is not a function
    }),
    title: 'Form',
  }

  constructor(props) {
    super(props);
    this.state = {
      formText: ''
    };
  }

  submitForm() {
    this.props.submitFormAction(this.state.formText)
  }

  render() {
    return (
      <View>
        ...form …

这是我的项目文件层次结构

RootTabNavigator
    | AuthStackNavigator // I want to go back to this navigator
          | AuthoScreen
    | Welcome Screen
    | MainTabNavigator // I want to reset MainTabNavigator 
          | FeedStacknavigator
                   | Screen A
          | OtherStackNavigatorOne
                   | Screen E
          | OtherStackNavigatorTwo
                   | Screen D
          | MenuStackNavigator 
                   | Menuo <-I'm here and want to reset to 'MainTabNavigator' 
                             and go BACK to 'AuthScreen'
           | Screen B
                   | Screen C

问题

用户在MenuStackNavigator和MainTabNavigator下的Menuo屏幕上.

如果用户没有令牌(当用户注销时),则用户返回到Auth Screen.

但同时我想重置MainTabNavigator.您可以卸载,执行NavigationActions.init()或其他任何操作.我更喜欢NavigationActions.init()

我只是想将MainTabNavigator设置为第一次.

码

如果没有令牌,我会回到Auth Screen(这是有效的)

This code if the part …

我想执行两个操作，但它不起作用。

const backAction = NavigationActions.back({
    key: null
})
const dispatchLogoutAction = NavigationActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({routeName: "LoginView"})]
});
nextProps.navigation.dispatch(backAction);
nextProps.navigation.dispatch(dispatchLogoutAction);

react-navigation除了并行列出 dispatch 语句之外，还有哪些其他方法可以调度这两个操作？

我有两个StackNavigator。电影：

const MoviesStackNavigator = createStackNavigator({
  Movies: Movies,
  MovieDetails: MovieDetails,
},{
  initialRouteName: 'Movies',
})

和演员：

const ActorsStackNavigator = createStackNavigator({
  Actors: Actors,
  ActorDetails: ActorDetails,
},{
  initialRouteName: 'Actors',
})

我在TabNavigator中使用它们：

const RootTabs = createBottomTabNavigator({
  Movies: {
    screen: MoviesStackNavigator,
    navigationOptions: {
      tabBarLabel: 'Movies'
    }
  },
  Actors: {
    screen: ActorsStackNavigator,
    navigationOptions: {
      tabBarLabel: 'Actors'
    }
  },
})

当用户更改选项卡时，我希望他到达该选项卡的根组件（Movies或Actors），而不是堆叠组件（MoviesDetails或ActorsDetails）。换句话说，当用户退出选项卡时，该选项卡中的StackNavigator应重置为根组件。

我的第一种方法是StackActions.reset在初始化选项卡中的根组件时尝试重置其他选项卡（用户刚刚退出），但是该库至少以这种方式阻止了导航器之间的交互。

那么，有什么想法吗？