导航栏封面内容

Le Dinh Nhat Khanh

我面临的问题是导航栏涵盖了所有内容

index.android.js

export default class RNTodosApp extends Component {
  render() {
    const routes = [
      {title: 'Todos', index: 0}
    ];
    return (
      <Provider store={store}>
        <View>
          <StatusBar
            backgroundColor='#0277BD'
            barStyle='light-content'
           />
          <Navigator
            initialRoute={routes[0]}
            initialRouteStack={routes}
            navigationBar={
              <Navigator.NavigationBar
                routeMapper={{
                  LeftButton: (route, navigator, index, navState) =>
                    { return; },
                  RightButton: (route, navigator, index, navState) =>
                    { return; },
                  Title: (route, navigator, index, navState) => {
                    return (<Text style={styles.title}>{route.title}</Text>); 
                  },
                }}
                style={styles.navigatorBar}
                navigationStyles={Navigator.NavigationBar.StylesIOS}
              />
            }
            renderScene={(route, navigator) => {
              if(route.index === 0) {
                return (
                  <App />
                )
              }
            }} />
        </View>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  navigatorBar: {
    backgroundColor: '#01579B',
  },
  title: {
    color: '#FFFFFF',
    fontSize: 20,
  }
});

和App.js文件

class App extends Component {
    render() {
        console.log('Get called!');
        return (
            <View style={styles.container}>
                <Text>Hello World!</Text>
                <Text>Hello World!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#000000'
    }
})

现在的问题是我无法使Hello World文本显示在屏幕上

导航器封面内容

谢谢你。

我试图添加和更改alignItems和justifyContent道具,但仍然无法正常工作

Le Dinh Nhat Khanh

我忘记了代码中的flex 1,解决了!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在封面图片后缩小导航栏

来自分类Dev

Bootstrap-在导航栏上设置封面图像

来自分类Dev

页面内容被导航栏覆盖

来自分类Dev

导航栏重叠内容文本

来自分类Dev

内容下方的导航栏

来自分类Dev

页脚导航栏重叠内容

来自分类Dev

导航栏垂直显示内容

来自分类Dev

被导航内容取代的垂直导航栏按钮

来自分类Dev

尝试在使用z-index滚动时在封面图像后面隐藏固定的导航栏

来自分类Dev

导航栏缩小,滚动内容更改

来自分类Dev

Bootstrap3导航栏填充内容

来自分类Dev

导航栏吃掉的身体内容

来自分类Dev

iOS 7导航栏隐藏内容

来自分类Dev

UIScrollView的内容已在导航栏下方偏移

来自分类Dev

Bootstrap导航栏涵盖缩放内容

来自分类Dev

侧边栏导航并在右侧显示内容

来自分类Dev

导航栏和内容之间的空间

来自分类Dev

固定的Bootstrap导航栏被页面内容覆盖

来自分类Dev

基于内容的可滚动垂直导航栏

来自分类Dev

内容重叠的固定导航栏

来自分类Dev

HTML导航栏向下推页面内容

来自分类Dev

修复了导航栏隐藏网页内容的问题

来自分类Dev

Bootstrap导航栏涵盖缩放内容

来自分类Dev

导航栏吃掉的身体内容

来自分类Dev

停止侧面导航栏挤压内容

来自分类Dev

在导航栏中将“内容”替换为“图像”

来自分类Dev

浮动导航栏下的页面内容

来自分类Dev

导航栏溢出 (x) 页面内容

来自分类Dev

导航栏菜单 - 内容丰富