时间戳

首页 > 解决方案 > React Native [NativeBase] - 为什么内容内没有显示任何内容？

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

问题描述

我正在试验 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'。

为什么它什么也没显示？它应该显示整个红色屏幕。

标签： react-nativenative-base

解决方案

A<Content>是ScollViewReact Native 的一个，所以你可以使用contentContainerStyle.

所以：

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

参考一

参考二

推荐阅读