Question

我是本机反应的新手。因此，我一直在浏览react-navigation网站上的一些文档，以了解模式等的工作原理。可以在以下位置找到此代码：https://reactnavigation.org/docs/en/modal.html 我不明白几件事：

为什么需要以下代码，它到底在做什么？

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

为什么我们不叫this.props.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对象作为参数传递到NavigationOption中。因此，您不使用从父母那里收到的“ this.props.navigation”。

您需要研究参数。似乎由于缺乏对参数的了解而提出了这个问题。

有用的链接

about parameters

如果要使用drawer Navigator，则必须使用与stack navigator相同的方式进行配置。

有用的链接

我有一些关于本机模式的问题

1 个答案: