Question

我想将信息传递给模态组件，但是当我想在列表视图的每个元素上使用模态时，我一直收到此错误：

undefined不是对象（评估'_this2.refs.rowModal.setModalVisible'）

import React, { Component } from 'react';
import { View, ListView, Text, StyleSheet, TouchableOpacity } from 'react-native';
import RowHistorial from './Row';
import ModalNormas from './ModalNormas';

class ListHistorial extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      modalVisible: false,
      header : this.props.header,
      data : this.props.data,
      dataSource: ds.cloneWithRows(this.props.data),
    };
  }
  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }
  render() {
    return (
      <View>
        <Text style={styles.header}>
          {this.state.header}
        </Text>
        <ListView
          style={styles.container}
          dataSource={this.state.dataSource}
          renderRow = 
            {(data, rowID, sectionID) =>
              <View>
                <TouchableOpacity onPress={() => this.refs.rowModal.setModalVisible(true)}>
                  <RowHistorial {...data}/>
                  <ModalNormas ref="rowModal" data = {this.state.data[sectionID]}/>
                </TouchableOpacity>
              </View>
            }
          renderSeparator={(sectionId, rowId) =><View key={rowId} style={styles.separator}/>}
        />
      </View>
    );
  }
}

export default ListHistorial;

最近开始在RN抱歉为初学者提问。

Answer 1

我在listview之外添加了我的模态，只是在列表视图中调用相同的模态。希望这可以帮到你。以下是我的代码示例：

const React = require('React');
const ReactNative = require('react-native');
const{
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  ListView,
  TouchableOpacity,
  Modal,
} = ReactNative;

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      dataSource: dataSource.cloneWithRows(this.props.data),
      modalVisible: false,
      reasonUserName:"",
      reasonUserID:0,
      reasonGroupID:0,
      reason:"",
    }
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={styles.container}>
        <Modal
           animationType={"fade"}
           transparent={true}
           visible={this.state.modalVisible}
           onRequestClose={() => {alert("Modal has been closed.")}}
           >
          <View style={styles.modalContainer}>
           <View style={styles.modalView}>
              <View style={styles.modalHeader}>
                <Text>This is the header</Text>
              </View>
              <View style={styles.modalBody}>
                <TextInput style={styles.modalTextInput} onChangeText={(reason) => this.setState({reason})} placeholder="Enter reason"></TextInput>
              </View>
              <View style={styles.modalFooter}>
                 <TouchableHighlight style={styles.modalButtons} onPress={() => {this.setModalVisible(!this.state.modalVisible)}}>
                   <Text>Close</Text>
                 </TouchableHighlight>
                 <TouchableHighlight style={[styles.modalButtons, styles.modalButtonBorder]} onPress={() => this._pressAcceptReason()}>
                 <Text>Accept</Text>
               </TouchableHighlight>
              </View>
           </View>
          </View>
         </Modal>
        <ListView
             dataSource={this.state.dataSource}
             renderRow={this.renderRow.bind(this)}
             renderSectionHeader={this.renderSectionHeader}
           />
      </View>
    );
  }

  renderRow(user) {
    return (
      <TouchableOpacity style={styles.giveReasonButton} onPress={() => this._pressGiveReason(user)}>
        <Text style={styles.userName}>{user.name}</Text>
      </TouchableOpacity>
      )
  }

  _pressGiveReason(user){
    this.setModalVisible(true);
    this.setState({reasonUserName:user.name,reasonUserID:user.ID, reasonGroupID:user.groupId})
  }

  _pressAcceptReason(){
    this.setModalVisible(false);
  }

module.exports = ModalExample;

在listview项目上打开clic模式

1 个答案: