Question

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

我尝试了所有我能想到的flexbox和heights的组合，但是没有任何效果，包括按钮在内的部分的高度仍然比我想要的大得多，并且button不是并排的。

这是有问题的组件

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%"
  }
});

这是模态显示的方式（自从过去两个小时以来我一直不停地放置按钮，因此我在样式方面工作不多）：

screen shot

我希望有人可以帮我解决这个问题。我是新来的本地人，所以我很确定这是我在某个地方错过的琐碎问题。

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

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>

如何在React Native中的滚动视图下显示按钮

1 个答案: