javascript - React Native - 带有 Flatlist 项目的模态

Question

我正在制作一个模式，当用户单击平面列表按钮或项目时会弹出，用户将在其中看到有关他/她单击的项目的详细信息。基本上，我想将平面列表的项目传递给模态。

我实际上已经完成了模式的弹出窗口，现在我必须显示菜单描述和菜单价格等详细信息。我在 stackoverflow 中找到了一篇帖子，我按照其中的所有内容进行了操作，但是我遇到了关于“id ”的错误，我不知道如何解决它。

这是我的代码

细节.js

import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl, Dimensions, Modal, TextInput, TouchableWithoutFeedback, Keyboard
} from 'react-native';

import AddModal from '../Modal/AddModal';

var screen = Dimensions.get('window');

const DismissKeyboard = ({ children }) => (
    <TouchableWithoutFeedback onPress = {() => Keyboard.dismiss()}>
        {children}
    </TouchableWithoutFeedback>
);

export default class Details extends Component {
    static navigationOptions = {
        title: ''
    };
    constructor()
    {
        super ()
        this.state = {
            data: [],
            showModal: false,
            id: null,
        }
    }

    fetchData = async() => {
        const { params } = this.props.navigation.state;
        const response_Cat = await fetch('http://192.168.254.101:3307/categories/' + params.id);
        const category_Cat = await response_Cat.json();
        this.setState({data: category_Cat});
    };

    componentDidMount() {
        this.fetchData();
    };

    _onRefresh() {
        this.setState({ refreshing: true });
        this.fetchData().then(() => {
            this.setState({ refreshing: false })
        });
    };

    _onPressItem(id) {
        this.setState({
            modalVisible: true,
            id: id
        });
    }

    _renderItem = ({item}) => {
        return (
            <TouchableHighlight
                id = { item.menu_desc }
                onPress = { this._onPressItem(item.menu_desc) }
            >
                <View>
                    <Text>{ this.state.id }</Text>
                </View>
            </TouchableHighlight>
        )
    };

  render() {
    const { params } = this.props.navigation.state;
      return (
          <View style = { styles.container }>
            <AddModal
                modalVisible = { this.state.modalVisible }
                setModalVisible = { (vis) => { this.setModalVisible(vis) }}
                id = { this.state.id }
            />
              <FlatList
                data = { this.state.data }
                renderItem = { this._renderItem }
                keyExtractor={(item, index) => index}
                /*refreshControl = {
                    <RefreshControl
                        refreshing = { this.state.refreshing }
                        onRefresh = { this._onRefresh.bind(this) }
                    />
                }*/
              />
          </View>
      );
  }

}

const styles = StyleSheet.create({
...
})

//AppRegistry.registerComponent('Details', () => Details);

AddModal.js

import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl, Dimensions, TextInput, Modal
} from 'react-native';

export default class AddModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
            id: null
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            showModal: nextProps.showModal,
            id: nextProps.id,
        })
    }

    render() {
        return (
            <Modal
                animationType="slide"
                transparent={ true }
                visible={ this.state.modalVisible }
                onRequestClose={() => { this.props.setModalVisible(false) }}>
                    <View>
                        <View>
                            <Text>{ this.state.id }</Text>
                            <TouchableHighlight
                                onPress = {() => { this.props.setModalVisible(false) }}
                            >
                                <Text>Hide Modal</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
            </Modal>
        )
    }
}

Answer 1

只是想指出您代码中的一个问题(与“id”错误无关，id 错误已由 digit 回答)。在renderItem函数，你正在调用 onPress = { this._onPressItem(item.menu_desc) } , 应该改为

onPress = { () => this._onPressItem(item.menu_desc) }

我想，您会调用 onPressItem当用户点击列表项时。

编辑:

我做了一些更改以使您的代码正常工作。以下是更改。

在你的AppModal.js ，您正在 showModal: nextProps.showModal 中设置模态可见性, 但在 <Modal ...>你设置了visible
= { this.state.modalVisible } .也在 Details.js你写了<AddModal modalVisible ... >.

首先我改了showModal至 modalVisible在Details.js在AppModal.js .

Details.js

constructor()
{
    super ()
    this.state = {
        data: [],
        modalVisible: false,
        id: null,
    }
}

然后我改了_onPressItem(id)至 _onPressItem = (id)

在 renderItem 中进行了更改作为

<TouchableHighlight
   id = { item.enName }
   onPress = { () => this._onPressItem(item.enName) }
>

在render功能我已将模态可见性设置为

<AddModal
  ...
  setModalVisible = { (vis) => { this.setState({
     modalVisible: vis
   })
  }}
  ...
/>

AppModal.js

已更改 showModal至 modalVisible

constructor(props) {
  super(props);
  this.state = {
    modalVisible: props.modalVisible,
    d: null
  };
}

componentWillReceiveProps(nextProps) {
  this.setState({
    modalVisible: nextProps.modalVisible,
      id: nextProps.id,
  })
}

在构造函数中，我添加了 modalVisible: props.modalVisible .

希望这会有所帮助!