Question

我正在创建一个模式，当用户点击一个或多个平面列表按钮时会弹出该模式，用户将看到有关他/她点击的项目的详细信息。基本上，我想将flatlist的项目传递给modal。

我实际上已经完成了模态的弹出窗口，现在我必须显示菜单描述和菜单价格等细节。我在stackoverflow中找到了一个帖子，我在那里关注了所有内容，但是我遇到了一个关于“id”的错误，我无法弄清楚如何修复它。

这是我的代码

Details.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 ...＆gt;。

首先我将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。

希望这会有所帮助！

Answer 2

我猜item.menu_desc是每个项目的ID，所以它必须是{item.menu_desc}而不是{id}。改变如下

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

React Native - 具有Flatlist项目的Modal

2 个答案: