如何在反应本机中单击平面列表项时将值传递给模态并显示模态

Question

i want to pass a value from activity screen to modal screen. I am trying to open a screen when click on flatlist item an dpass value of item to modal,but it shows my detail before rendering modal screen,Here is my activity screen:-

  <FlatList
                  data={this.state.myListDataSource}
                  renderItem={this._renderItem}
                  showsHorizontalScrollIndicator={false}
                  showsVerticalScrollIndicator={false}
                  keyExtractor={({item,index}) => item+index}
                  refreshControl={
                    <RefreshControl
                      refreshing={this.state.isRefreshing}
                      onRefresh={this.pullToRefresh}
                    />
                  }
                />

<ListProducts
                  modalVisibility={this.state.listModalVisibility}
                  closeModal={() => 
 this.setState({listModalVisibility:false})}
                  listName={this.state.listName}
                  listId={this.state.listId}
              />

handleListItemPress = (item) => {    
  this.setState({
    listModalVisibility:true,
    listName : item.name,
    listId : item.list_id
  })
  showMessage('List Item : '+item.listId)

}

 _renderItem = ({item}) => {
return(
  <TouchableOpacity onPress={() => this.handleListItemPress(item)}>
    <View >
      <View>
        <View style={{flexDirection:'row',marginBottom:2}}>
          <ImageView 
            image={item.pictures[0]}
            style={[{marginRight:2},styles.imageStyle]}
          />
          <ImageView 
            image={item.pictures[1]}
            style={[{marginLeft:2},styles.imageStyle]} 
          />
        </View>
        <View style={{flexDirection:'row',marginTop:2}}>
          <ImageView 
            style={[{marginRight:2},styles.imageStyle]}
            image={item.pictures[2]}
          />
          <ImageView 
            image={item.pictures[3]}
            style={[{marginLeft:2},styles.imageStyle]}
          />
        </View>
      </View>
      <View>
        <TextViewNonClickable 
          textViewText={item.name}

        />
        <TextViewNonClickable 
          textViewText={item.description}

        />
      </View>
      <Icon
        name = 'more-vertical'
        type = 'feather'
        color = {color.colorWhite}
        iconStyle={{padding:8}}
        containerStyle = {{position:'absolute',top:8,right:8}}
        onPress = {() => {
          showMessage('Options')
        }}
      />
    </View>
  </TouchableOpacity>
)}

This is my modal screen where i want to get list item id or name.But that screen shows details on the screen rather than rendering modal screen . Here is my modal screen :-

export default class ListProducts extends Component {

  constructor(props){
super(props)
this.state={
  products : [],
  refreshing : false,
  listId : 256,
  listName : props.name
}
  }

_renderProducts = ({item}) => {

return(
  <Product
      image={item.image}
      name={item.name}
      price={item.price}
      discountedPrice={item.discounted_price}
      quantityAdded={item.quantity_added}
      productId={item.product_id}
      stock={item.stock}
  />
)
  }

  render() {

const {modalVisibility,closeModal,listName,listId} = this.props;

return (
  <Modal 
    animationIn='bounceInRight'
    animationOut='bounceOutRight'
    isVisible={modalVisibility}
    onBackButtonPress={closeModal}
  >
    <View style={{flex:1,backgroundColor:color.colorWhite}}>
        <Header
            placement='left'
            leftComponent={
        <FlatList
            data={this.state.products}
            renderItem={this._renderProducts}
            keyExtractor={(item,index) => item+index}
            refreshControl={
              <RefreshControl
                  refreshing={this.state.refreshing}
                  onRefresh={this.pullToRefresh}
              />
          }
          numColumns={3}
          style={{paddingLeft:2,paddingRight:2}}
        />
    </View>
  </Modal>
)
  }
}

Answer 1

I'm actually using 'Dialog' from 'react-native-simple-dialogs' for popup. It works better for me than 'Modal', but i think the logic is the same. Here is a simplified example of a edit email popup that works for me:

import React from 'react';
import { StyleSheet, View, TextInput } from 'react-native';
import { Button, Text } from 'native-base';
import { Dialog } from 'react-native-simple-dialogs';


export default class EditEmailPopup extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isModalVisible: this.props.isModalVisible,
    };
  }

  componentWillUpdate() {
    this.state.isModalVisible = this.props.isModalVisible;
  }

  _updateEmailAndCloseDialog() {
    // update some data...
    this._onCloseDialog();
  }

  _onCloseDialog() {
    this.setState({ isModalVisible: false});
    this.props.client();   //this is a function transfered from parent that controls the visibility of the dialog.
  }

  render() {
    return (
      <View>
        <Dialog
          visible={this.state.isModalVisible}
          onTouchOutside={() => this._onCloseDialog()}
        >
          <View>
            <Text style={styles.text}>{'Update Email text'}</Text>
            <View style={styles.popupButtons}>
              <Button
                transparent
                style={styles.cancelButton}
                onPress={() => this._onCloseDialog()}
              >
                <Text> {'cancel'} </Text>
              </Button>

              <Button
                style={styles.okButton}
                onPress={() => this._updateEmailAndCloseDialog()}
              >
                <Text> {'ok'} </Text>
              </Button>
            </View>
          </View>
        </Dialog>
      </View>
    );
  }
}

Here is how i add my Dialog in the parent view:

{this.state.emailModalVisibility ? (
   <EditEmailPopup
     isModalVisible={this.state.emailModalVisibility}
     client={this.afterClosePopup}
   />
 ) : null}

while this.state.emailModalVisibility initiated in the constructor in state as 'false'.

function written in parent:

_afterClosePopup = () => {
    this.setState({
      emailModalVisibility: false
    });
  };

and binded in the constructor so 'this' will belong to parent:

 constructor(props) {
    super(props);
    this.afterClosePopup = this._afterClosePopup.bind(this);
    this.state = {
      emailModalVisibility: false
    };
  }

Answer 2

Step 1: pass props from modal to class. In modal like:

this.props.setItem(“sunny”)

Step 2: Get that props in class in render method where modal initialised.

<ModalName SetItem={item => console.log(item)} \>