React Native [NativeBase]-为什么内容内什么都没显示?

时间:2018-06-24 02:19:22

标签: react-native native-base

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

我正在尝试在屏幕(全屏)上显示一个红色正方形,但是它什么也没做。

显然,使用纯本机内置组件很容易。

但是它不适用于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%'
  }
});

这就是我得到的: enter image description here

那是为什么?根据文档,在使用NativeBase时,所有内容都应包装在Container组件内。并且每个容器应仅具有 个内容组件。

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

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

1 个答案:

答案 0 :(得分:0)

x, y, dx, dy是React Native的<Content>,因此您可以使用ScollView

所以:

contentContainerStyle
  

Reference one

     

Reference two