Question

在React Native中，我有这个组件：

class List extends Component {
  render() {
    return (
      <Provider store={store}>
        <View style={ styles.container } >
          <ListContainer />
        </View>
      </Provider>
    );
  }
}

View组件具有以下样式：

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

这用来占据整个屏幕。但是，我添加了StackNavigator组件：

const MyApp = StackNavigator({
  List: { screen: List },
  OtherComponent: { screen: OtherComponent }
});

现在我的组件不再占用整个屏幕了。顶部有一个奇怪的白色空间。我相信现在我的View组件嵌套在其他组件中，并且不知何故使它不占用整个屏幕。

那么如何让我的View再次占据整个屏幕？

Answer 1

这是StackNavigator的问题。我不得不改变这个代码：

List: { screen: List },

到此：

List: { screen: List, navigationOptions: { header: null } },

防止外部组件在顶部添加空白区域

1 个答案: