创建两个垂直按钮本机反应

Question

我一直试图用两个垂直按钮创建一个模态，每个按钮占据矩形宽度的50％。我尝试了以下代码，但似乎给了我不想要的结果，因为该框被压缩到文本大小而不是拉伸。

  <Modal
       animationType="slide"
       isVisible={this.state.isModalVisible}
       onRequestClose={() => {
         Alert.alert('Modal has been closed.');
       }}>
        <View style={{flex:1, justifyContent: 'center'}}>
          <View style={{height: 400, backgroundColor: '#fff', padding: 20}}>
             <Text>Want to call  ?</Text>

              <View style={{flex:1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderWidth: 1}}>

               <TouchableOpacity onPress={() => this.setState({isModalVisible: false})}>
                <View style={{flex:1 ,height: 40,backgroundColor: '#822A80'}}>
                 <Text>Cancel</Text>
                </View>
               </TouchableOpacity>

               <TouchableOpacity onPress={() => this.setState({isModalVisible: false})}>
                <View style={{flex:1 , height: 40, backgroundColor: '#50AFAD'}}>
                 <Text>Yes!</Text>
                </View>
               </TouchableOpacity>

             </View>

           </View>
       </View>
    </Modal>

Answer 1

首先定义宽度和高度，并使用弹性方向，例如：

render() {
return (
  // Try setting `flexDirection` to `column`.
  <View style={{flex: 1, flexDirection: 'row'}}>
  <TouchableOpacity onPress={() => this.setState({isModalVisible: false})}>
    <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
  </TouchableOpacity>
  <TouchableOpacity onPress={() => this.setState({isModalVisible: false})}>
    <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
  </TouchableOpacity>
  </View>
);
}