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

November 28, 2019 ... ☕️ 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顶部导航栏会有个阴影,为了统一样式需要去掉或修改成细线。

Android nav!

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

#react#react-native