Question

我正在创建国家代码类。在其中，我返回国家代码列表。我想关闭包含列表代码的模态，并且还返回显示模态列表的平面列表的单击项值。我想将国家代码从模式屏幕返回到当前的js文件。这是我的代码模态类：-

import React, { Component } from 'react';
import { StyleSheet, View, 
Text,Modal,FlatList,TouchableWithoutFeedback} from 'react-native';
import { showMessage } from '../utils/GeneralFunctions';
import { Icon } from 'react-native-elements';
import TextInputBox from '../components/TextInputBox';
import {color} from '../values/color';
import {TextViewNonClickable} from '../components/TextView';

const countryCodes = require('../jsonData/codesCountry.json');

export default class Codes extends Component {

constructor(props) {
    super(props);
    this.state = {
        countryCodes : countryCodes,
        modalVisible : false,
        searchedText : '',
        loading : false,
        selectedCountry : '',
    };

    this.arrayHolder = [];
}    

componentWillMount = () => {
    if(this.state.modalVisible == false){
        this.setState({countryCodes : countryCodes})
    }
    this.arrayHolder = countryCodes;
};

//show countries modal
static showCountryModal = (modalVisibility) => {
    showMessage("sunny");
    if(modalVisibility == true){
        this.setState({modalVisible:false})
   }else{
       this.setState({modalVisible:true})
   }
}

//set Modal Visibility
static setModalVisibility(visibility){
    showMessage("Set Modal Visibility : "+visibility);
    this.setState({modalVisible:visibility});
}

//search country
searchText = (text) => {
    const newData = this.arrayHolder.filter(item => {
        const itemData = `${item.name.toUpperCase()} 
${item.code.toUpperCase()} ${item.dial_code.toUpperCase()}`;
        const textData = text.toUpperCase();
        return itemData.indexOf(textData) > -1;      
    });
    if(text != null){
        this.setState({
            countryCodes : newData,
        });
    }else if(text == " "){
        this.setState({
            countryCodes : countryCodes,
        });
    }
};

//setting selected country
selectedCountry = (item) => {
    this.props.modalVisible = false;
    this.setState({selectedCountry : item.dial_code})
    showMessage("Code : " + item.dial_code)        
}

_renderItem = ({item}) => {
    return (
        <TouchableWithoutFeedback onPress={() => 
this.selectedCountry(item)}>
            <View style=                       
   {{height:48,flexDirection:'row',
 justifyContent:'center',alignItems:'center',
padding:16,borderBottomWidth:1,
borderBottomColor:color.pageBackground}}>
                <TextViewNonClickable
                    textViewText={item.name+"("+item.code+")"}
                    textStyle=    
{{fontSize:16,fontWeight:'bold',flex:0.85,
color:color.colorBlack}}
                />
                <TextViewNonClickable
                    textViewText={item.dial_code}
                    textStyle=
{{fontSize:16,fontWeight:'bold',flex:0.15,
color:color.colorBlack}}
                />
            </View>
        </TouchableWithoutFeedback>
    )
}

render() { 

  //  const {modalVisible} = this.props;

    return (
            <Modal
                animationType='slide'
                transparent={false}
                visible={this.state.modalVisible}
                onRequestClose={() => this.setState({
    countryCodes : countryCodes})}    
            >
                <View>
                    <View style={{flexDirection:'row',height:48,
    justifyContent:"center",alignItems:'center',
    borderBottomWidth:1,paddingStart:16,paddingRight:16}}>
                        <Icon 
                            name='search' type='material-icons'
     size={24} color='black'
                        />
                        <TextInputBox
                            textInputStyle=
  {{borderColor:color.colorTransparent,
    color:color.colorHintText,flex:1}}
                            placeHolderText='Search here...'
                            onChangeText={text => 
        this.searchText(text)}  
                        />
                    </View>

                   <View>
                        <FlatList
                            data={this.state.countryCodes}
                            renderItem={this._renderItem}
                            keyExtractor={(item,index) => 
        item+index}
                            showsVerticalScrollIndicator={false}
                        />
                   </View>
                </View>                    
            </Modal>
        );
    }

}

const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    },
});

这是我的codesClass.js类

import React, { Component } from 'react';
import {StyleSheet,View,ImageBackground} from 'react-native';
import { HeaderView } from '../components/Headers';
import { Actions } from 'react-native-router-flux';
import { appString } from '../values/appStrings';
import { color } from '../values/color';
import TextInputBox from '../components/TextInputBox';
import TextViewClickable from '../components/TextView';
import Button from '../components/Buttons';
import {showToast, showMessage} from '../utils/GeneralFunctions'
import { dimension } from '../values/dimensions';
import Codes from '../dialogs/Codes';

export default class SignUpScreen extends Component {

constructor(props) {
    super(props);
    this.state = {
        countryCode : '',
        phone : '',
        modalVisible:false,
    };
}

openOrCloseCountryCodes = () => {
    if(this.state.modalVisible == false){
        // this.setState({modalVisible:true});
        Codes.setModalVisibility(true);
    }else{
        // this.setState({modalVisible:false});
        Codes.setModalVisibility(false);
    }
    // Codes.showCountryModal(true);
}


render() {
    return ( 
    <View>
    <View style={{flexDirection:'row',marginTop:20}}>
          <TextViewClickable
              textViewText={this.state.countryCode != '' ? 
    this.state.countryCode : '+91'}
              touchableButtonStyle={styles.touchableButtonStyle}
              textStyle={styles.textStyle}
                    onPress={() => 
            {this.openOrCloseCountryCodes();}}
                />
            <TextInputBox
                placeHolderText={appString.placeholderPhoneNumber}
                onChangeTextSet={(text) => {this.setState({
        phone : text})}}
                textInputStyle={{flex : 1,marginLeft : 4}}
                />
            </View>
        <Codes modalVisible={this.state.modalVisible} 
                closeModal={() => this.openOrCloseCountryCodes()}/>
        </View>

            );
        }

    }

    const styles = StyleSheet.create({

parentView : {
    flex: 1,
    alignItems: 'center',  
},
touchableButtonStyle: {
    marginRight : 4,
    borderRadius: dimension.textInputBorderRadius,
    borderWidth: dimension.textInputBorderWidth,
    borderColor: color.textInputBorderColor,
    justifyContent : 'center',
    alignItems:'center',
    paddingLeft: 16,
    paddingRight: 16,
},
textStyle : {
    fontSize: dimension.regularFontSize,  
    color : color.colorHintText,
        }
    });

Answer 1

onRequestClose上的模式应为：

onRequestClose={() => this.props.closeModal(this.state.selectedCountry)}

和SignUpScreen，处理回调值：

<Codes 
     modalVisible={this.state.modalVisible} 
     closeModal={(selectedCountry) => {
         this.openOrCloseCountryCodes()

         // do something with selectedCountry
         console.log(selectedCountry)
     }}
/>

Answer 2

在您的情况下，我假设Modal的关闭和打开都有效。

在下面的功能中，将选定的国家/地区代码设置为某个state，并关闭modal并将值传递给class Codes，创建与{{1} }并将其设置为该状态。

在showCountryModal class中粘贴以下更改

下面的代码：

signUpScreen

在selectedCountry = (item) => { this.openOrCloseCountryCodes(); Codes. setSelectedCountryCode(item.dial_code); this.setState({selectedCountry : item.dial_code}) showMessage("Code : " + item.dial_code) } class中粘贴以下更改

下面的代码：

Codes

还包括// initialise `state` `countryCode` constructor(props) { super(props); this.state = { countryCodes : countryCodes, modalVisible : false, searchedText : '', loading : false, selectedCountry : '', countryCode: "" }; this.arrayHolder = []; } //set selected country static setSelectedCountryCode = (countryCode) => { this.setState({countryCode: countryCode}) }，以便处理android的backbuttonclick 在onRequestClose上调用该函数以关闭模式

您应该研究onRequestClose的概念和对静态props的控制不是很好的静态方法，而应使用modal 。

在React Native中单击项目时如何关闭模态列表并从平面列表返回值？

2 个答案: