Question

导航器具有导航栏的道具。文档说：

"Optionally provide a navigation bar that persists across scene transitions"

使用它，当转换到新屏幕时，只有当导航栏没有改变时，内容才会生成动画，即它仍然存在。

但是，使用navigationBar props我可以有一个标题或一个页脚，它可以跨越过渡。我想要两者：页眉和页脚都应该在场景转换中持续存在。

我在这里添加了一个例子：

RN Play Example

如果单击“TestComponent”或“TestComponent2”，您将看到右侧的下一个屏幕转换，而底部的导航栏不是转换的一部分。如何添加也不属于过渡的标题？

导航器可以实现吗？

Answer 1

我们还没有找到一个很好的解决方案，所以我们推出了自己的解决方案，它在一个相当复杂的应用程序中实际上运行得非常好。以下是我们的自定义导航器组件的主要内容：

var App = React.createClass({
    render() {
    return (
        <View style={{ flex:1 }}>
            <Header />
            <AppNavigator />
            <Footer />  
      </View>
    )
  }
})

关于这一点的好处是我们对页眉和页脚有很多控制权。我已经设置了一个基本的工作示例，说明了我正在谈论的here，并粘贴了以下代码。

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableHighlight
} = React;

var Header = () => (
    <View style={ styles.nav }>
    <Text>PERSISTENT Header</Text>
  </View>
)

var Footer = () => (
    <View style={ styles.footer }>
    <Text>PERSISTENT Footer</Text>
  </View>
)

var AppNavigator = React.createClass({
    renderScene(route, navigator) {
    return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } )
  },
  render() {
    return (
        <Navigator
      style={{ flex:1 }}
      initialRoute={{ id: '0', component: Home, title: 'Home' }}
      renderScene={ this.renderScene }
      />
    )
  },
})

var App = React.createClass({
    render() {
    return (
        <View style={{ flex:1 }}>
            <Header />
            <AppNavigator />
            <Footer />  
      </View>
    )
  }
})

var Home = React.createClass({

  navigate(route, someprops) {
    this.props.navigator.push({
        component: route,
      passProps: {
        someprops: someprops
      }
    })
  },

  render: function() {
    return (
      <View style={styles.container}>
            <Text>Hello from Home</Text>
            <TouchableHighlight onPress={ () => this.navigate(About, 'ABOUT MESSAGE!!!') } style={ styles.button }>
                <Text>Go to about</Text>
            </TouchableHighlight>
      </View>
    );
  }
});

var About = React.createClass({
    render() {
    return (
        <View>
            <Text>HEllo from About</Text>
            <Text>These are the props: { this.props.someprops }</Text>
      </View>
    )
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  button: {
    height:50,
    backgroundColor: '#efefef',
    borderWidth:1,
    borderColor: '#ededed'
  },
  nav: {
    height: 60,
    backgroundColor: '#ededed',
    alignItems: 'center',
    justifyContent: 'center'
  },
  footer: {
    height: 60,
    backgroundColor: '#ededed',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

AppRegistry.registerComponent('App', () => App);

导航器，在过渡之间保持页脚和标题

1 个答案: