防止外部组件在顶部添加空格答案

【问题标题】：Prevent outer component to add white space at top防止外部组件在顶部添加空格
【发布时间】：2018-03-27 21:54:45
【问题描述】：

在 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再次占据整个屏幕呢？

【问题讨论】：

标签： javascript css react-native flexbox

【解决方案1】：

这是StackNavigator 的问题。我不得不从这里更改代码：

List: { screen: List },

到这里：

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

【讨论】：