javascript - 单击 React Native 中的项目时如何关闭模式并从 flatlist 返回值？

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

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

在下面的函数中，您将选定的国家代码设置为某个state，同时关闭modal并将值传递给class Codes 创建另一个与 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})
     }

还包括 onRequestClose 以便处理 android 的后退按钮点击在 onRequestClose 上调用函数关闭模态

你应该学习 props 的概念和静态方法的想法不是很好控制 modal 可见性使用 props 相反。