React Native [NativeBase] - 为什么内容内没有显示任何内容？

Question

我正在试验 NativeBase，它做了一些奇怪的事情。

我试图在屏幕上显示一个红色方块（全屏），但它什么也没做。

显然，这很容易使用纯 react-native 内置组件。

但它不适用于 NativeBase。

这是我目前的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Button
} from 'react-native';
import {
  Container,
  Content
} from 'native-base';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.onButtonClick = this.onButtonClick.bind(this);
  }

  onButtonClick() {
    console.log("The button has been pressed!");
  }

  render() {
    return (
      <Container>
        <Content>
          <View 
            style={styles.container}
          />
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FF0000',
    flexDirection: 'column',
    width: '100%',
    height: '100%'
  }
});

这就是我得到的：

这是为什么呢？根据文档，在使用 NativeBase 时，所有内容都应该包装在 Container 组件中。而且每个容器都应该只有一个内容组件。

作为整个屏幕的内容组件，在这个内容组件中，我添加了一个视图，我将其设置为flex: 1，并将其设为width: '100%', height: '100%', background: '#FF0000'。

为什么不显示任何内容？它应该显示整个红色屏幕。

Answer 1

<Content> 是 React Native 的 ScollView，因此您可以使用 contentContainerStyle。

所以：

<Content contentContainerStyle={{ backgroundColor: "#FF0000" }}>

Reference one

Reference two