javascript - 在 react-native 中使用两个构造函数

Question

我在 react-native 中有一个项目，在我的项目中我有 ListView 和模态， ListView 需要构造函数，而模态需要构造函数当我尝试使用两个构造函数时出现错误，我该如何解决这种情况？请帮忙 !!

  import React, { Component } from 'react';  
import {  
    StyleSheet,
    ToolbarAndroid
    ,AppRegistry,
    View,
    Text,
    TouchableHighlight,
    Modal,
    TextInput,
    ListView,ActionButton,
    Image,
    Alert
} from 'react-native';
var DialogAndroid = require('react-native-dialogs');

export default class HygexListView extends Component {

    constructor() {
        super(...arguments);
        this.state = {
            visible: false
        };
    }
 constructor(props){

    super(props);
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 != r2
    });
    this.state = {
      ds:[{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"}],
      dataSource:ds,
    }


  }



  componentDidMount(){
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(this.state.ds),
    })

  }
  pressRow(rowData){

    var newDs = [];
    newDs = this.state.ds;
    newDs[0].Selection = newDs[0] == "CustomerName" ? "CustomerPhone" : "";
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(newDs)
    })

    showModal = () => {
        this.setState({
            visible: true
        });
    };

    hideModal = () => {
        this.setState({
            visible: false
        });
    };

  }

  renderRow(rowData){
    return (
      <TouchableHighlight
        onPress={()=> this.showModal()}
        underlayColor = '#ddd'>
        <View style ={styles.row}>
          <Text style={{fontSize:19}}>{rowData.CustomerName} {"\n"} {rowData.CustomerPhone} </Text>
          <View style={{flex:1}}>
            <Text style={styles.selectionText}>{rowData[rowData.Selection]}</Text>
          </View>
        </View>
      </TouchableHighlight>

    )
  } 
   render() {
  return (
  <View style={styles.container}>
  <View style={styles.toolbar}>
  <TouchableHighlight >
  <Image style={styles.imagestyle}
  source={require('./ic_search.png')}/>
  </TouchableHighlight>
  <Text style={styles.toolbarTitle}>CUSTOMERS</Text>
  <TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
  <Image style={styles.imagestyle}
  source={require('./ic_action_name.png')} />
    </TouchableHighlight>

    </View>



  <ListView
        dataSource = {this.state.dataSource}
        renderRow = {this.renderRow.bind(this)}>
      </ListView>
        <View style={styles.x}>
                    <TouchableHighlight style={styles.action1}>
                   <Text style={styles.actionText}>CUSTOMERS</Text>
                   </TouchableHighlight>
                     <TouchableHighlight style={styles.action1}
                    onPress={() => this.moveToOrderEntry()}>
                    <Text style={styles.actionText}>Order Entry</Text>
                   </TouchableHighlight>

                   <TouchableHighlight style={styles.action}
                    onPress={() => this.moveToMyOredre()}>
                    <Text style={styles.actionTex1}>My Order</Text>
                   </TouchableHighlight>

                         </View>
                           <Modal
                visible={this.state.visible}
            >

<View style={styles.modalContainer}>
 <View style={styles.toolbar}>
   <View>
<Text style={styles.toolbarTitle}>X</Text>
</View>
<Text style={styles.toolbarTitle}>Details</Text>
                      </View>
                      <View style={styles.ButtonflexDirection}>
    <Text >CUSTOMER Name</Text>
    </View>
    <View style={styles.ButtonflexDirection}>
    <Text >Address</Text>

    </View>
    <View style={styles.ButtonflexDirection}>
    <Text >Phone Number</Text>
    </View>
    <View style={styles.ButtonflexDirection}>
    <Text >Interested Product</Text>
    </View>
    <View style={styles.ButtonflexDirection}>
    <Text >Discount</Text>
    </View>
    <View >
 <TouchableHighlight style={styles.button}
                    onPress={() => this.moveToHygexListView()}>
                    <Text style={styles.buttonText}>           ADD ORDER</Text>

                  </TouchableHighlight>
                      </View>
                </View>
            </Modal>

      </View>
        )
    }
      moveToMyOredre() {
      this.props.navigator.push({
        id: 'MyOrder'
      })
 }
     moveToOrderEntry() {
      this.props.navigator.push({
        id: 'OrderEntry'
      })
 }
       moveToAddNewCustomer() {
      this.props.navigator.push({
        id: 'AddNewCustomer'
      })
 }

}

Answer 1

只使用一个构造函数:

constructor(props){
  super(props);
  var ds = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 != r2
  });
   this.state = {
     ds:[{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"}],
     dataSource:ds,
     visible: false,
    }


}