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

Question

I've been trying to create a modal with two vertical buttons which take 50% of the width of the rectangle each. I tried the following code but it seems to give me an unwanted results, that the box is squeezed down to the size of the text instead of stretching.

  <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

First of all define width and height and use flexdirection like example:

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