Question

我正在编写一个应用程序，只想在将新视图推送到导航器时显示后退按钮（在这种情况下是新闻文章与新闻文章列表）。

似乎这样做的方法是修改render（）以仅包含某些导航器状态的Back按钮。虽然React Native文档建议导航器中的组件可以使用getContext访问它，但这似乎不适用于navigatorBar。

这是正确的方法吗？如何仅针对某些导航状态渲染“后退”按钮？

<Navigator
    initialRoute={{name: 'NewsList', index: 0}}
    renderScene={this.renderScene}
    sceneStyle={styles.navigator}
    navigationBar={
        <View style={styles.navbar}>
            <View style={styles.logo_container}>
                <Text style={styles.backButton}>Back</Text>
                <Image
                    source={require( 'image!Logo' )}
                    style={styles.logo}
                />
            </View>
            <View style={styles.separator} />
        </View>
    }
/>

Answer 1

将导航栏代码移动到自己的组件中，将路径信息传递给它*，然后检查路径深度。

TLDR;

if (route.index > 0){
    //Show Back Button.
}

或者只是让您的生活更轻松，并使用这些插件中的任何一个为您完成工作。

React-Native-NavBar https://github.com/Kureev/react-native-navbar

React-Native-Router https://github.com/t4t5/react-native-router

*由于添加了Navigator.getContext（this）.xxx，因此可能不再需要传递路径。有关getContext https://facebook.github.io/react-native/docs/navigator.html

的更多信息，请参阅导航器文档

更改navigationBar以响应导航状态

1 个答案: