javascript - 防止外部组件在顶部添加空白

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 } },