[英]How to close modal and return value from flatlist when click on item in react native?
I am creating country codes class. 我正在创建国家代码类。 In which, I return list of country codes. 在其中,我返回国家代码列表。 I want to close modal that contains of list codes and also return the clicked item value of flat list that display list of modals. 我想关闭包含列表代码的模态,并且还返回显示模态列表的平面列表的单击项值。 I want return country code from modal screen to current js file. 我想将国家代码从模式屏幕返回到当前的js文件。 Here is my Codes modal Class:- 这是我的代码模态类:
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',
},
});
Here is my codesClass.js class 这是我的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,
}
});
onRequestClose
on Modal should be: 模态上的onRequestClose
应该是:
onRequestClose={() => this.props.closeModal(this.state.selectedCountry)}
and SignUpScreen, handle callback value: 和SignUpScreen,处理回调值:
<Codes
modalVisible={this.state.modalVisible}
closeModal={(selectedCountry) => {
this.openOrCloseCountryCodes()
// do something with selectedCountry
console.log(selectedCountry)
}}
/>
In your case I assume the closing and opening of Modal
is working. 在您的情况下,我假设Modal
的关闭和打开都有效。
In the below function you set the selected country code to a certain state
along with it close the modal
and pass the value to class Codes
create another function same as showCountryModal
and set it to a state there. 在下面的函数中,将选定的国家/地区代码设置为某个state
,同时关闭modal
并将其传递给class Codes
创建另一个与showCountryModal
相同的函数,并将其设置showCountryModal
状态。
In class
signUpScreen
paste the below changes 在signUpScreen
class
粘贴以下更改
Code below : 代码如下:
selectedCountry = (item) => {
this.openOrCloseCountryCodes();
Codes. setSelectedCountryCode(item.dial_code);
this.setState({selectedCountry : item.dial_code})
showMessage("Code : " + item.dial_code)
}
In class
Codes
paste the below changes 在class
Codes
粘贴以下更改
Code below : 代码如下:
// 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})
}
Also include onRequestClose
so that backbuttonclick of android gets handled on onRequestClose
call the function to close the modal 还包括onRequestClose
以便在onRequestClose
处理android的backbuttonclick调用函数以关闭模式
You should study the concept of props
and the static method idea not that great to control modal
visibility use props
instead. 您应该学习props
的概念和静态方法的想法,而对于控制modal
可见性不是那么好,而是使用props
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.