在 react native 中使用 modal 和 listView

Question

我在 react-native 的同一屏幕上有列表视图和模式，问题是在这种情况下我有两个构造函数，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'
      })
 }

}

Answer 1

JavaScript 不支持function overloading（具有不同实现的多个同名方法）。这适用于方法和constructor。

因此，您可以合并它们并在必要时添加一些条件，而不是重载（无论如何，尽管我们有多个构造函数，但我们实际上并没有利用函数重载；当然那不会即使我们这样做了也可以工作。）。

试试这个：

constructor(props, context) {
  super(props, context);
  const ds = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
  });

  this.state = {
    visible: false,
    ds: [
      { CustomerName: "Customer Name", CustomerPhone: "+564659878964" },
      { CustomerName: "Customer Name", CustomerPhone: "+564659878964" },

      // ...
    ],
    dataSource: ds, // did you mean ds.cloneWithRows(['row 1', 'row 2'])?
  }
}