創建兩個垂直按鈕本機反應

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

首先定義寬度和高度，並使用flexdirection，例如：

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