Navigatorbar 封面内容

Question

我遇到了导航栏覆盖所有内容的问题

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 道具，但它仍然不起作用

Answer 1

我在代码中忘记了 flex 1，已解决！

Navigatorbar 封面内容

Navigatorbar cover content

react-native

react-native-android