我是全新的反应原生。我正在试图弄清楚如何制作一个箱子全高。
我试图将flex属性添加到容器和视图中,但高度不是100%。
export default class LinksScreen extends React.Component {
render() {
return (
<ScrollView style={styles.container}>
<View style={{ flex: 1, backgroundColor: '#fff', flexGrow: 1 }}>
<Text>Hallo</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
padding: 20,
backgroundColor: 'blue',
},
});
您需要使用具有高度的View包装ScrollView。 ScrollViews must have a bounded height in order to work
。你可以在这里阅读更多细节:https://facebook.github.io/react-native/docs/scrollview
做到如下:
render() {
return (
<View style={styles.container}>
<View style={{height: 80}} >
<ScrollView
...
编辑
你的代码确实有效。也许您只是想在整个屏幕被占用时查看您的滚动视图是否有效。试试下面你会看到,我只是将文本内容乘以80次:
render() {
return (
<ScrollView style={styles.container}>
<View style={{ flex: 1, backgroundColor: "#fff", flexGrow: 1 }}>
{Array(80)
.fill(1)
.map((item, index) => (
<Text>Hallo {index}</Text>
))}
</View>
</ScrollView>
);
}
删除flex:1
给height:"100%"
width: "100%"