Question

我创建了一个使用Navigator组件的应用程序，我想知道有没有办法在场景外实现页眉和页脚组件？

我目前所拥有的屏幕截图： http://i.stack.imgur.com/XHDKC.png

首次尝试是通过使页眉和页脚成为具有绝对样式的单个组件来完成的。

      //index.js
     <Navigator initialRoute={{id: 'home', title: window.title}}
                renderScene={renderScene}
                navigationBar={<DefaultHeader toggleSideMenu={this.toggleSideMenu}
                route={route.id} />}/>

        //DefaultHeader.js
        <View style={styles.navContainer}>
            <View style={styles.header}>
            </View>
            <View style={styles.footer} shouldUpdate={false}>
            </View>
        </View>

虽然看起来很有效，但由于React导航器组件中的渲染顺序，我无法点击场景中的任何内容。

Answer 1

我决定重新考虑我的方法，并将导航栏与导航器组件完全分开。这依赖于您传递路由功能和任何其他路由信息。

routeTo: function (route) {
   if (route.to == "back") {
            this.refs.navigator.pop();
        } else {
            this.refs.navigator.push(route);
   } 
},
canGoBack: function () {
    return this.refs.navigator && this.refs.navigator.getCurrentRoutes().length > 1
},
getDefaultRoute: function () {
    return {id: 'home', title: window.title};
},
getCurrentRoute: function () {
    if (this.refs.navigator) {
        return _.last(this.props.navigator.getCurrentRoutes());
    }
    return this.getDefaultRoute();
},
render() {
    return (
            <View style={styles.container}>
                <DefaultHeader routeTo={this.routeTo} route={this.getCurrentRoute()}
                               toggleSideMenu={this.toggleSideMenu}/>
                <Navigator
                    ref="navigator"
                    initialRoute={this.getDefaultRoute()}
                    renderScene={renderScene}
                    />
                <DefaultFooter routeTo={this.routeTo} route={this.getCurrentRoute()}/>
            </View>
    )
}

Answer 2

虽然很漂亮＆＃34; hacky＆＃34; - 为什么不在页眉和页脚之间添加第三个视图（完全展开），并设置onStartShouldSetResponder和onMoveShouldSetResponder以返回false：中间视图和navContainer视图）。见https://facebook.github.io/react-native/docs/gesture-responder-system.html。我不确定它是否有效，但值得尝试。

然而，最好的方法是修改导航器组件并添加页脚道具并在那里显示。它是纯粹的javascript，所以应该很容易做到。

Answer 3

我正在使用RN 0.36，我可以通过使用导航器高度来限制页脚来解决此问题：

  <View style={{flex: 1}}>
    <ScrollView>
    ...
    </ScrollView>
    <View style={{
      height: 40,
      borderTopWidth: 1,
      borderTopColor: colors.grey,
      flex: 0,
      marginBottom: Navigator.NavigationBar.Styles.General.TotalNavHeight
    }}>
      <Text>Footer</Text>
    </View>
  </View>

我的索引文件（即index.ios.js）看起来像

  <NavigatorIOS
    style={{flex: 1}}
    initialRoute={{
      title: ' ',
      component: Main
    }}
    ...

检查NavigatorIOS和Navigator

React Native：在Navigator中包含页眉和页脚组件

3 个答案: