时间戳

首页 > 解决方案 > 如何为 react native 中的组件创建一个单独的类并将其用作公共类？

react-native - 如何为 react native 中的组件创建一个单独的类并将其用作公共类？

问题描述

嗨，我正在学习本机反应。我正在使用本机反应的模态组件。我需要在应用程序中多次使用相同的。这里的代码现在我试图调用函数 {this.createModal(dataForMaritalStatus)} 而不是

/* <Modal visible={this.state.isModalVisible}
                        onRequestClose={() => {
                            this.setState({ isModalVisible: false })
                        }}
                        animationType="fade"
                        transparent={true}
                    >
                        <View style={styles.modalContainer}>


                            <ScrollView
                                showsVerticalScrollIndicator={true}
                            >
                                {dataForMaritalStatus === null ? <Text style={styles.nodata}>No data Found </Text> : dataForMaritalStatus.map((status, id) => (
                                    <View key={id}>
                                        <TouchableOpacity

                                            style={styles.opacity}
                                            onPress={() => {
                                                this._toggleModal()
                                            }}>
                                            <Text style={styles.taskList}>{status.value}</Text>
                                        </TouchableOpacity>
                                    </View>
                                ))}

                            </ScrollView>
                        </View>
                    </Modal>
*/

那么如何为这个组件创建一个通用类并传递不同的数据数组并在渲染方法中使用它呢？出于不同的目的，数据会有所不同，我需要为不同的目的维护不同的状态。

编辑：我已经为它编写了一个方法，但它调用了函数但它不渲染模式，我需要渲染它吗？

    createModal = (data) => {

<Modal visible={this.state.isModalVisible}
                        onRequestClose={() => {
                            this.setState({ isModalVisible: false })
                        }}
                        animationType="fade"
                        transparent={true}
                    >
                        <View style={styles.modalContainer}>


                            <ScrollView
                                showsVerticalScrollIndicator={true}
                            >
                                {data === null ? <Text style={styles.nodata}>No data Found </Text> : data.map((status, id) => (
                                    <View key={id}>
                                        <TouchableOpacity

                                            style={styles.opacity}
                                            onPress={() => {
                                                this._toggleModal()
                                            }}>
                                            <Text style={styles.taskList}>{status.value}</Text>
                                        </TouchableOpacity>
                                    </View>
                                ))}

                            </ScrollView>
                        </View>
                    </Modal>
  }

标签： react-native

解决方案

为模型创建一个单独的组件

import React, { Component } from "react";
import { Text, View, Modal, ScrollView, TouchableOpacity, Text } from "react-native";

export default class CustomModel extends Component {
  render() {
    const { dataForMaritalStatus } = this.props;
    return (
      <Modal
        visible={this.state.isModalVisible}
        onRequestClose={() => {
          this.setState({ isModalVisible: false });
        }}
        animationType="fade"
        transparent={true}
      >
        <View style={styles.modalContainer}>
          <ScrollView showsVerticalScrollIndicator={true}>
            {dataForMaritalStatus === null ? (
              <Text style={styles.nodata}>No data Found </Text>
            ) : (
              dataForMaritalStatus.map((status, id) => (
                <View key={id}>
                  <TouchableOpacity
                    style={styles.opacity}
                    onPress={() => {
                      this._toggleModal();
                    }}
                  >
                    <Text style={styles.taskList}>{status.value}</Text>
                  </TouchableOpacity>
                </View>
              ))
            )}
          </ScrollView>
        </View>
      </Modal>
    );
  }
}

不要忘记导出该组件。

现在将该组件导入您要使用的文件中

import Model from "./CustomModel";

并以这种方式使用它

<CustomModel dataForMaritalStatus=[] />

您可以像上面那样使用道具传递数据。

你可以在这里了解更多关于道具的信息：https ://facebook.github.io/react-native/docs/props

推荐阅读