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

A <Content> 是 React Native 的 ScollView 所以你可以使用 contentContainerStyle.

所以：

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

Reference one

Reference two

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

React Native [NativeBase] - Why nothing is shown inside Content?

react-native

native-base