如何在scrollview中显示反应原生的按钮

Question

大家好，我正在研究这个本机反应项目，我遇到了scrollView组件和按钮位置的问题。所以基本上我想有2个按钮，要么从scrollView下面的scrollView确认或取消我的选择，每个按钮都填充了一半的宽度。按钮和滚动视图都可以在模态中找到。

我已经尝试过灵活盒和高度的每一个组合，我设法想到但没有任何效果，包括按钮的部分的高度仍然比我想要的更大，按钮不是并排的。

这个有问题的组件：

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Modal, TouchableHighlight, ScrollView, FlatList } from 'react-native';
import { NavigationActions } from "react-navigation";
import genericStyle from '../../styles/generic-style';
import { colors, fontSizes } from '../../styles/base';
import values from '../../styles/responsive';
import NAVLogo from '../generic/NAVLogo';

export default class Welcome extends Component {
  state = {
    modalVisible: false,
    values: [
      {
        id: 1,
        text: "one"
      },
      {
        id: 2,
        text: "two"
      },
      {
        id: 3,
        text: "three"
      },
      {
        id: 4,
        text: "four"
      },
      {
        id: 5,
        text: "five"
      },
      {
        id: 6,
        text: "six"
      },
      {
        id: 7,
        text: "seven"
      },
    ]
  };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
    return (
      <View style={[styles.welcome, genericStyle.centerContainer]}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert("Modal has been closed.");
          }}
        >
          <View style={styles.modal}>
            <View style={styles.modalContent}>
              <View style={styles.scrollViewStyle}>
                <ScrollView style={styles.scrollViewStyle}>
                  {this.state.values.map((value, index) => (
                    <TouchableHighlight
                      onPress={() => console.log("TH1...")}
                      style={styles.company}
                      key={value.id}
                    >
                      <Text>{value.text}</Text>
                    </TouchableHighlight>
                  ))}
                </ScrollView>
              </View>
              <View
                style={{
                  flex: 1,
                  flexDirection: "column",
                  height: "15%"
                }}
              >
                <TouchableOpacity
                  onPress={() => {
                    this.setModalVisible(!this.state.modalVisible);
                  }}
                >
                  <Text>confirm</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={() => {
                    this.setModalVisible(!this.state.modalVisible);
                  }}
                >
                  <Text>cancel</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>

        <NAVLogo />
        <Text style={styles.text}>
          Welcome
          <Text style={styles.uname}>
            {" " + this.props.navigation.getParam("uname", "Unknown")}
          </Text>
        </Text>
        <TouchableOpacity
          onPress={() => {
            console.log("company");
            this.setModalVisible(true);
          }}
          style={styles.btnContainer}
        >
          <View style={styles.btn}>
            <Text style={styles.btnText}>Select Company</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            console.log("log out");
            this.props.navigation.dispatch(
              NavigationActions.navigate({
                routeName: "Home"
              })
            );
          }}
          style={styles.btnContainer}
        >
          <View style={styles.btn}>
            <Text style={styles.btnText}> Log out </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  welcome: {
    backgroundColor: colors.sky
  },
  btn: {
    width: "75%",
    paddingVertical: 15,
    backgroundColor: colors.darksky,
    marginTop: values.mtb + 3,
    alignItems: "center"
  },
  btnText: {
    fontSize: values.fontSize + 2,
    color: colors.light
  },
  btnContainer: {
    width: "100%",
    alignItems: "center"
  },
  text: {
    fontSize: values.fontSize,
    color: colors.dark,
    fontWeight: "400",
    marginVertical: 20
  },
  uname: {
    fontWeight: "900",
    fontSize: values.fontSize + 2
  },
  modalContent: {
    width: "80%",
    backgroundColor: colors.light,
    flex: 0
  },
  modal: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "rgba(00,00,00,0.3)"
  },
  company: {
    width: "100%",
    borderBottomColor: colors.dark,
    borderBottomWidth: 1,
    paddingLeft: 35,
    paddingVertical: 30
  },
  scrollViewStyle: {
    flexGrow: 0,
    flex: 0,
    height: "85%"
  }
});

这是模态显示的方式（我在样式上没有那么多工作，因为我在过去2小时内定位了按钮）：

我希望有人可以帮助我解决这个问题。我是新来回应原生，所以我很确定这是一个微不足道的问题，我错过了某个地方。

感谢大家提前为他们的时间和帮助。

Answer 1

使用flexDirection:'row'将它并排放置，并使用position:'absolute'使其保持在底部

<View
   style={{
   position:'absolute', 
   bottom:10,
   flexDirection: "row",
   justifyContent:'space-between',
   width:'100%'
 }}>

  <TouchableOpacity>
    <Text> CONFIRM </Text>
  </TouchableOpacity>
  <TouchableOpacity>
    <Text> CANCEL </Text>
  </TouchableOpacity>

</View>