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

标签： javascriptandroidreact-nativemodal-dialog

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为modalVisibleinDetails.js和 in AppModal.js。

详细信息.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.

希望这会有所帮助！