Question

考虑一下这个截图，

顶部的白色区域表示通用的<View>组件，而绿色/蓝色组合表示通过设置道具<NavBar> <Navigation> obj的应用专用navigationBar=组件p>

index.ios.js的主要代码

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
} = React;

var styles = StyleSheet.create({
    mainContent:{
        flex:1
    },
});

class BioStream extends React.Component{
    render() {
        return (
            <Navigator navigationBar={<NavBar />} renderScene={ (route, nav) => <View style={styles.mainContent}><Text>'some text'</Text></View>  } />
        );
    }
};

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

和NavBar组件定义文件的主要代码

var React = require('react-native');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var styles = StyleSheet.create({
    mainContainer:{
        flex:1
    },

    toolbar:{
        backgroundColor:'#81c04d',
        paddingTop:20,
        paddingBottom:10,
        flexDirection:'row',
        borderColor: 'black',
        borderWidth: 1
    },

    toolbarButton:{
        width: 50,
        color:'#fff',
        textAlign:'center'
    },

    toolbarTitle:{
        color:'#fff',
        textAlign:'center',
        fontWeight:'bold',
        flex:1
    },

    content:{
        backgroundColor:'blue',
        flex:1                //Step 2
    }
});

class NavBar extends React.Component{
    render() {
        return (
         <View style={styles.mainContainer} >
            <View style={styles.toolbar}>
                <Text style={styles.toolbarButton}>Add</Text>
                <Text style={styles.toolbarTitle}>This is the title</Text>
                <Text style={styles.toolbarButton}>Like</Text>
            </View>
            <View style={styles.content}>
            </View>
         </View>
        )
    }
};

module.exports = NavBar;

我怎么没有理解应该如何构建这种布局（和/或反应原生布局的一般性质）？我的意图是将导航栏始终放在框架顶部的所有场景中，并在下面渲染所有场景内容/代码。

Answer 1

似乎因为本机组件会在场景(source code here)之后渲染导航栏。您可以将样式设置为自定义导航栏以使其表现良好。

没有与此相关的问题，您可以在react native project上打开一个，以了解它应该是这样的原因。

Answer 2

它现在由反应本机处理我猜（专注于style = {styles.navigator}）：

<Navigator
      style={styles.navigator}
      navigationBar={
        <NavBar />
      }

      configureScene={this._configureScene}
      initialRoute={this.state}
      ref="featuresNavigator"
      renderScene= {this._renderScene}

/>

风格：

var styles = StyleSheet.create({ 
      navigator: {
            flexDirection: 'column-reverse'
      },
});

更多：如果未显示导航栏，则必须以其样式<NavBar style={{height: 40}}/>

设置高度

为什么反应原生显示导航器导航栏组件上方的场景？

2 个答案: