navigate导航同一路由时，组件不重新渲染

2019年11月28日 • ... • ☕️ 2 min read

React Navigation是易于使用的React-native导航解决方案。使用它可以简单定制导航文字以及左侧/右侧图片按钮，达到在不同平台的一致显示效果。

由于完全使用JavaScript编写，所以它有一些缺点：

React Navigation 不直接在 iOS 和 Android 上使用原生导航 API; 相反，它重新创建了这些API的一部分。这是一个有意识的选择，以便用户能够自定义导航体验的任何部分（因为它是用 JavaScript 实现的），并且能够调试他们遇到的问题而无需学习 Objective C / Swift / Java / Kotlin。

由于 React Navigation 的大部分逻辑都是用 JavaScript 而不是原生实现的，所以多关注 JavaScript 的线程阻塞是很有用的。

多次导航到同一路由

每次调用 push 时, 我们会向导航堆栈中添加新路由。当你调用 navigate 时, 它首先尝试查找具有该名称的现有路由, 并且只有在堆栈上没有一个新路由时才会推送该路由。

如何返回时重新渲染页面？

可以添加一个订阅器，监听willFocus事件。

  componentWillUnmount() {
    this.willFocusSubscription.remove();  }

  componentDidMount() {
    this.willFocusSubscription = this.props.navigation.addListener(        'willFocus',
        () => {
          // re-fetch code
        }
    );
  }

处理Android顶部导航栏阴影

默认地，Android顶部导航栏会有个阴影，为了统一样式需要去掉或修改成细线。

createStackNavigator({
// routConfigMap
}, {
// stackConfig
  headerLayoutPreset: 'center', // dao'hang文字居中
  defaultNavigationOptions: {
    headerStyle: {
      elevation: 0, // Android去除阴影      shadowOpacity: 0,
      borderBottomWidth: .5, // 设置底部线
      borderBottomColor: '#E5E5E5',
      borderBottomStyle: 'solid',
    }
  },
}