Question

我是新手，对本地人有反应。我正在尝试弄清楚如何使盒子全高。

我尝试将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',
  },
});

Answer 1

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

Answer 2

删除flex:1

给予height:"100%" width: "100%"

如何使视图的窗口高度为100％？

2 个答案: