【问题标题】:use two constructors in react-native在 react-native 中使用两个构造函数
【发布时间】:2016-11-25 13:54:03
【问题描述】:

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

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

}

【问题讨论】:

  • 在 ES6 中没有这种类型的多态性,并且您的实例将始终在参数中收到 props 值,即使您没有在函数声明中编写任何参数,因此,您不能有两个构造函数。你说视图和模态需要一个构造函数。这到底是什么意思?
  • 这是我的代码检查它,当我运行代码时出现错误,“重复使用构造函数”!如何解决?
  • 你不能有两个构造函数。将两者的逻辑合二为一,它应该可以工作。
  • 如何制作?你能合并吗?我的代码在这里!!!

标签: javascript android ios react-native


【解决方案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,
    }


}

【讨论】:

    猜你喜欢
    • 2018-04-10
    • 1970-01-01
    • 2015-08-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-24
    • 2018-08-09
    • 2021-02-21
    相关资源
    最近更新 更多