如何使视图100%的窗口高度?

问题描述 投票:1回答:2

我是全新的反应原生。我正在试图弄清楚如何制作一个箱子全高。

我试图将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',
  },
});
react-native
2个回答
0
投票

您需要使用具有高度的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>
    );
  }

0
投票

删除flex:1

height:"100%" width: "100%"

© www.soinside.com 2019 - 2024. All rights reserved.