如何在反应本机的文本组件上显示模态中的选定值

Question

如何在 react-native 的文本组件上设置模态的选定值。

我正在使用来自 'react-native' 的模态组件。

从 'react-native'

导入 { StyleSheet, View, Text, TouchableOpacity, Image,Modal,}

        <View style={styles.vwstyle}>
            <Text style={styles.texthead}>You are Interested in</Text>

            <View style={styles.vwside}>
                <Modal
                    animationType="fade"
                    transparent={false}
                    visible={this.state.modalVisible}

                    onRequestClose={() => {
                    }}>
                    <View style={styles.vwmodal}>

                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                            }}>
                            <Text style={styles.txtmodal}>Man</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                            }}>
                            <Text style={styles.txtmodal}>Woman</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                            }}>
                            <Text style={styles.txtmodal}>Everyone</Text>
                        </TouchableOpacity>

                    </View>
                </Modal>

                    <TouchableOpacity 
                    style={{flexDirection:'row'}}
                     onPress={() => {this.setModalVisible(true);}}>
                         <Text style={styles.txtselected}>Woman</Text>
                        <Image
                            source={require('../Images/rightarrow.png')} style={{ height: 20, width: 20, marginTop: 8, marginRight: 5 }} />
                        </TouchableOpacity>
            </View>
        </View>

Answer 1

您可以使用状态来保存按下的值。我在此处包含一个代码片段供您参考。

    constructor(props) {
      super(props);
      this.state = {
       otherStateVariables..... , 
    pressedOption: ""

}
    }
    render() {
    <View style={styles.vwstyle}>
            <Text style={styles.texthead}>You are Interested in</Text>

            <View style={styles.vwside}>
                <Modal
                    animationType="fade"
                    transparent={false}
                    visible={this.state.modalVisible}

                    onRequestClose={() => {
                    }}>
                    <View style={styles.vwmodal}>

                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                                /* Add this line to set your state on onPress handler*/
                                this.setState({pressedOption:"Man"})
                            }}>
                            <Text style={styles.txtmodal}>Man</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                                /* Add this line to set your state on onPress handler*/
                                this.setState({pressedOption:"Woman"})
                            }}>
                            <Text style={styles.txtmodal}>Woman</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.touchmodal}
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                                /* Add this line to set your state on onPress handler*/
                                this.setState({pressedOption:"Everyone"})
                            }}>
                            <Text style={styles.txtmodal}>Everyone</Text>
                        </TouchableOpacity>

                    </View>
                </Modal>

                    <TouchableOpacity 
                    style={{flexDirection:'row'}}
                     onPress={() => {this.setModalVisible(true);}}>
                         <Text style={styles.txtselected}>Woman</Text>
                        <Image
                            source={require('../Images/rightarrow.png')} style={{ height: 20, width: 20, marginTop: 8, marginRight: 5 }} />
                        </TouchableOpacity>
            </View>
        </View>
    }

设置状态后，您可以在代码中的任何位置使用该状态变量，方法是使用

this.state.pressedOption

如何在反应本机的文本组件上显示模态中的选定值

How to show selected value from modal on text component in react-native

react-native

react-native-android

react-native-ios

react-native-modal

如何在 react-native 的文本组件上设置模态的选定值。