Javascript 如何在react native中单击flatlist项时将值传递给modal并显示modal

我想将一个值从活动屏幕传递到模式屏幕。当单击flatlist item时，我试图打开一个屏幕。item to modal的dpass值为，但它在呈现模式屏幕之前显示了我的详细信息，这是我的活动屏幕：-

  <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)

_renderProducts=（{item}）=>{

返回(
)
}
render（）{
const{modalVisibility，closeModal，listName，listId}=this.props；
返回(
)
}
}

我实际上在弹出窗口中使用了“react native simple dialogs”中的“Dialog”。它比“模态”更适合我，但我认为逻辑是一样的。 下面是一个适用于我的编辑电子邮件弹出窗口的简化示例：

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>
    );
  }
}

并绑定到构造函数中，因此“this”将属于父级：

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

---

我实际上在弹出窗口中使用了“react native simple dialogs”中的“Dialog”。它比“模态”更适合我，但我认为逻辑是一样的。 下面是一个适用于我的编辑电子邮件弹出窗口的简化示例：

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>
    );
  }
}

并绑定到构造函数中，因此“this”将属于父级：

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

---

步骤1：将道具从模态传递到类。 以类似情态的方式：

this.props.setItem(“sunny”)

步骤2：在模式初始化的render方法中获取类中的道具

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

console.log（项目）}\>

步骤1：将道具从模态传递到类。 以类似情态的方式：

this.props.setItem(“sunny”)

步骤2：在模式初始化的render方法中获取类中的道具

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

console.log（项目）}\>

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