javascript - 单击FlatList元素时如何打开带有项目信息的Modal？

我要实现的目标是，当用户按下FlatList组件之一时，打开一个模式对话框。该列表的代码如下所示:

class MyItem extends React.Component {
  _onPress = () => {
    this.props.onPressItem(this.props.item);
  };
  render() {
    return(
        <TouchableOpacity
            {...this.props}
            onPress={this._onPress}
            >
            <Text style={styles.itemText}> {this.props.item.name}</Text>
        </TouchableOpacity>
    )
  }
}

export default class MyList extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: {}, // some data correctly loaded
            isModalVisible: false
        };
    };

    _onPressItem = (item) => {
        this._showModal;
    };

    _showModal = () => this.setState({ isModalVisible: true })

    _keyExtractor = (item, index) => item.id;

    _renderItem = ({item}) => (
        <MyItem
            style={styles.row}
            item={item}
            onPressItem={this._onPressItem}
        />
    );

    render() {
      return(
        <KeyboardAvoidingView behavior="padding" style={styles.container}>
          <View style={styles.titleContainer}>
              <Text style={styles.title}>Tittle</Text>
          </View>
          <ScrollView style={styles.container}>
              <FlatList
                  data={this.state.data}
                  ItemSeparatorComponent = {this._flatListItemSeparator}
                  renderItem={this._renderItem}
                  keyExtractor={this._keyExtractor}
              />
          </ScrollView>
          <MyModal modalVisible={this.state.isModalVisible}/>
        </KeyboardAvoidingView>
      );
    }
}

样式，FlatList数据和某些功能已删除，因为它们与此问题无关。

如您所见，MyModal组件在ScrollView组件之后声明。该代码基于使用react-native Modal组件:

export default class MyModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
        isModalVisible: props.modalVisible
    };
  };

  _setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
        <View>
            <Modal
            animationType="slide"
            transparent={false}
            visible={this.state.modalVisible}
            onRequestClose={() => {alert("Modal has been closed.")}}
            >
                <View style={styles.container}>
                    <View style={styles.innerContainer}>
                        <Text>Item Detail</Text>
                        <TouchableHighlight
                            style={styles.buttonContainer}
                            onPress={() => { this._setModalVisible(false) }}>
                            <Text style={styles.buttonText}>Close</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </Modal>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: 'transparent',
  },
  innerContainer: {
    borderRadius: 10,
    alignItems: 'center',
    backgroundColor: '#34495e',
 },
 buttonContainer: {
    paddingVertical: 15,
    marginTop: 20,
    backgroundColor: '#2c3e50',
    borderRadius: 15
 },
 buttonText: {
    textAlign: 'center',
    color: '#ecf0f1',
    fontWeight: '700'
 },
});

当前行为是当我第一次访问MyModal组件时显示MyList组件，我可以将其关闭，然后在其中显示FlatList，但是当按下列表项时，不显示MyModal组件。

如何仅在按下列表项时隐藏模式并打开它？

与此相关的另一个疑问是:

如何将按下的项目对象传递给MyModal组件？

提前致谢!

最佳答案

将item传递给模态

要将所选项目传递给模态，您需要将其作为prop添加到Modal组件上。

您可以记住处于MyList状态的所选项目:

_onPressItem = (item) => {
    this._showModal(item);
};

_showModal = (selectedItem) => this.setState({ isModalVisible: true, selectedItem })

然后从render对其进行MyList编码时，将其传递给模态:

// ...
      </ScrollView>
      <MyModal
        modalVisible={this.state.isModalVisible}
        selectedItem={this.state.selectedItem} />
    </KeyboardAvoidingView>
// ...

控制模式的可见性

当前，在MyList的状态(isModalVisible，作为MyModal Prop 传递给modalVisible)和MyModal的状态(modalVisible)中，都有一个模式可见性 bool(boolean) 值。不需要最后一个-它只会让您头疼，无法保持同步。只需使用 Prop “control” MyModal，保留单个真相源，然后传递一个回调，以允许MyModal告诉MyList该模式应被取消。

// ...
      </ScrollView>
      <MyModal
        modalVisible={this.state.isModalVisible}
        selectedItem={this.state.selectedItem}
        onDismiss={this._hideModal} />
    </KeyboardAvoidingView>
// ...

一个新的无状态MyModal:

export default class MyModal extends Component {
  render() {
    return (
        <View>
            <Modal
            animationType="slide"
            transparent={false}
            visible={this.props.modalVisible}
            onRequestClose={() => { this.props.onDismiss() }}
            >
                <View style={styles.container}>
                    <View style={styles.innerContainer}>
                        <Text>Item Detail</Text>
                        <TouchableHighlight
                            style={styles.buttonContainer}
                            onPress={() => { this.props.onDismiss() }}>
                            <Text style={styles.buttonText}>Close</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </Modal>
        </View>
    );
  }
}