javascript - 用 flex 反应原生滚动视图

Question

我正在尝试创建一个模式，它有 2 个部分：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失去了效果！

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

任何想法？

提前致谢！

标签： javascriptreactjsreact-nativeecmascript-6