使用模態和列表視圖反應本機

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