我有几个关于 react-native 模态的问题

Question

我是 react-native 的新手。因此，我一直在浏览 react-navigation 网站上的一些文档，以了解模态等的工作原理。此代码可在此处获得：https://reactnavigation.org/docs/en/modal.html 我不明白一些事情：

为什么需要下面的代码，它到底做了什么：

    static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

为什么我们不在这一行调用 this.props.navigation.navigate 而只是 navigation.navigate：

onPress={() => navigation.navigate('MyModal')}

我可以不使用 StackNavigator，而是使用抽屉导航器吗？这样行得通吗？如果是，我如何在这里使用它？

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

    return {
      headerLeft: (
        <Button
          onPress={() => navigation.navigate('MyModal')}
          title="Info"
          color="#fff"
        />
      ),
      /* the rest of this config is unchanged */
    };
  };

  /* render function, etc */
}

class ModalScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 30 }}>This is a modal!</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="Dismiss"
        />
      </View>
    );
  }
}

const MainStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    /* Same configuration as before */
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

Answer 1

第一题和第二题是同一个问题。您将 navigation object 作为参数传递给 NavigationOption。这就是为什么您不使用从 parents.

收到的 'this.props.navigation'

你需要研究参数。这个问题好像是因为对参数的了解不多所以才问的

有用的链接

about parameters

如果你想使用 drawer Navigator，你必须像 stack navigator 一样配置它。

有用的链接

我有几个关于 react-native 模态的问题

I've got a few questions regarding modals in react-native

react-native

react-navigation

react-navigation-stack