使用flex反应本机滚动视图

Question

我正在尝试创建一个模态，它包含两个部分：ScrollView和TouchableOpacity。

所以我用了react-native-modal和我的app.js：

import React, { Component } from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from "react-native";
import Modal from "react-native-modal";

export default class Example extends Component {
  state = {
    isModalVisible: false
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => this.setState({ isModalVisible: true })}
        >
          <View style={styles.button}>
            <Text>Open It!</Text>
          </View>
        </TouchableOpacity>

        <Modal
          isVisible={this.state.isModalVisible}
          onBackButtonPress={() => this.setState({ isModalVisible: false })}
        >
          <View style={styles.modalContent}>
            <View style={{ flex: 9 }}>
              <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
                <View style={{ flex: 3, backgroundColor: "red" }}>
                  <Text>A</Text>
                </View>

                <View style={{ flex: 2, backgroundColor: "yellow" }}>
                  <Text>B</Text>
                </View>

                <View style={{ flex: 1, backgroundColor: "green" }}>
                  <Text>C</Text>
                </View>

                <View style={{ flex: 1, backgroundColor: "blue" }}>
                  <Text>D</Text>
                </View>

                <View style={{ flex: 1, backgroundColor: "cyan" }}>
                  <Text>E</Text>
                </View>

                <View style={{ flex: 1, backgroundColor: "orange" }}>
                  <Text>F</Text>
                </View>

                <View style={{ flex: 1, backgroundColor: "orange" }}>
                  <Text>F</Text>
                </View>

                <View style={{ flex: 1, backgroundColor: "orange" }}>
                  <Text>F</Text>
                </View>

                <View style={{ flex: 1, backgroundColor: "orange" }}>
                  <Text>F</Text>
                </View>

                <View style={{ flex: 1, backgroundColor: "orange" }}>
                  <Text>F</Text>
                </View>

                <View style={{ flex: 1, backgroundColor: "orange" }}>
                  <Text>F</Text>
                </View>
              </ScrollView>
            </View>
            <View style={{ flex: 1 }}>
              <TouchableOpacity
                style={styles.button}
                onPress={() => this.setState({ isModalVisible: false })}
              >
                <Text>Add Package</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },

  button: {
    backgroundColor: "lightblue",
    padding: 12,
    margin: 16,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 4,
    borderColor: "rgba(0, 0, 0, 0.1)"
  },

  modalContent: {
    flex: 1,
    backgroundColor: "white",
    padding: 22,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 4,
    borderColor: "rgba(0, 0, 0, 0.1)"
  }
});

但是现在它不可滚动了！我试图删除flexGrow: 1，但随后孩子的flex: x失去了作用！

请考虑我不想使用高度和宽度！

有什么主意吗？

  

谢谢！