Как передать значение модальному и показать модальное при нажатии на элемент плоского списка в реагировать родной

Question

Я хочу передать значение с экрана активности на модальный экран.Я пытаюсь открыть экран, когда щелкаю по элементу плоского списка значение 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)

}

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

Это мой модальный экран, где я хочу получить идентификатор или имя элемента списка. Но этот экран показывает детали на экране, а не визуализирует модальный экран.Вот мой модальный экран: -

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

Я на самом деле использую 'Dialog' из'act-native-simple-dialogs 'для всплывающих окон.Это работает лучше для меня, чем «Модал», но я думаю, логика та же.Вот упрощенный пример всплывающего окна редактирования электронной почты, которое работает для меня:

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.state.emailModalVisibility ? (
   <EditEmailPopup
     isModalVisible={this.state.emailModalVisibility}
     client={this.afterClosePopup}
   />
 ) : null}

в то время как this.state.emailModalVisibility инициируется в конструкторе в состоянии 'false'.

функция, записанная в parent:

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

и связанная в конструкторе, так что this будет принадлежать parent:

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