Question

嗨，我正在学习本地反应。我正在使用本机的Modal组件。我需要在应用程序中多次使用相同的功能。这里的代码现在我正在尝试调用该函数 {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>
*/

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

编辑：我已经为它编写了一个方法，但是它调用了函数，但是它不呈现模式，我是否需要呈现它？

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

Answer 1

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

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=[] />

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

您可以在此处了解有关道具的更多信息：https://facebook.github.io/react-native/docs/props

Answer 2

在一个文件夹中创建新组件。

app-> CommonModal.js

CommonModal.js

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

export default class CommonModal extends Component{
constructor(props) {
        super(props);
    }
}

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


                        <ScrollView
                            showsVerticalScrollIndicator={true}
                        >
                            {this.props.dataForMaritalStatus === null ? <Text style={styles.nodata}>No data Found </Text> : this.props.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>
)
}

注意：我已经使用了this.props.dataForMaritalStatus

然后在需要组件的地方使用它

app-> Second.js

Second.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import CommonModal from './CommonModal';

export default class Second extends Component{
constructor(props){
super(props);
this.state={
dataForMaritalStatus:['val1','val2']
}
}
render(){
return(<View style={{flex:1}}>
<CommonModal dataForMaritalStatus={this.state.dataForMaritalStatus}/>
</View>)}
}

Answer 3

解决方案1 

创建一个单独的文件customModalComponent.js，然后通过prop传递数组数据。稍微更改Modal组件，对this.props.dataForMaritalStatus使用dataForMaritalStatus。

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

      ...
  )}
</ScrollView>

，然后在任何其他文件import CustomModal from './customModalComponent'上以这种方式使用，

<CustomModal dataForMaritalStatus={yourArrayOfData}/>

解决方案2

如果您只是在同一个文件中使用它，请创建一个函数

class myClass extends Component {
  constructor(props) {
    super(props);

    this.createModal = this.createModal.bind(this);
  }

  render() {
    ...
  }

  createModal(dataForMaritalStatus) {
    return (
      //Insert your Modal code here
      ...
    )
  }
}

并以这种方式在渲染中使用它，

render() {
  <View>
    ...
    { 
      this.createModal(yourArrayOfData)
    }
    ...
  </View>
}

如何在React Native中为组件创建单独的类并将其用作公共类？

3 个答案: