我正在试验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%'
}
});
那是为什么?根据文档,在使用NativeBase时,所有内容都应包装在Container组件内。并且每个容器应仅具有 个内容组件。
作为内容组件的整个屏幕,我在该内容组件内添加了一个视图,该视图设置了flex: 1
并将其设置为width: '100%', height: '100%', background: '#FF0000'
。
为什么不显示任何内容?它应该显示整个红色屏幕。
答案 0 :(得分:0)
x, y, dx, dy
是React Native的<Content>
,因此您可以使用ScollView
。
所以:
contentContainerStyle