必须点击FlatList两次以激活行内的TouchableOpacity

时间:2017-07-05 11:30:20

标签: reactjs react-native

我遇到以下代码的问题。似乎我必须点击FlatView两次才能让它选择行。它第一次移除键盘然后第二次实际激活TouchableOpacity。任何人都可以看到问题所在,谢谢。

render() {

    const { navigate } = this.props.navigation;

    console.log("Rendering");

    if(this.state.inputText != ""){
        var contactListView = <View style={styles.contactListWrapper}>
            <FlatList
                data = {this.state.dataContactList}
                renderItem={({item}) => <TouchableOpacity onPress={() => this.pressRowContact( item )} >
                <View style={styles.contactRow}>
                    <View style={styles.standardProfilePicWrapper}>
                        <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 30, height: 30}}/>
                    </View>
                    <Text>Someone Name Here</Text>
                </View>
            </TouchableOpacity>}
            />
        </View>
    }else {
        var contactListView;
    }


    var selectedUsers = this.state.arrayContactsSelected.map(function(item) {
        return (
            <TouchableOpacity style={styles.addedContactNameWrapper} onPress={() => this.onAddedContactPress("")} key={item.userID} >
                <Text style={styles.contactSelectedName} >Oliver Rice</Text>
            </TouchableOpacity>
        );
     });


    return (
        <KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
        <View style={{flex: 1}}>
            <StatusBar hidden={true} />
            <View style={styles.headerBar}>
                <NavBar navigation={this.props.navigation} goBack={this.goBack} title="NEW MESSAGE" backButton={true} />
            </View>
            <View style={styles.contentWrapper}>
                <View style={styles.addContactWrapper} >
                    <View style={styles.addContactLeft} >
                        <Text style={styles.contactTo}>To:</Text>
                    </View>
                    <View style={styles.addContactRight} >
                        {selectedUsers}
                        <View style={styles.addedContactInputWrapper}  >
                            <TextInput
                            style={styles.addContactInput}
                            onChangeText={this.onChangeTextHandler}
                            value={this.state.inputText}
                          />
                        </View>
                    </View>
                </View>
                <View style={styles.mainContentWrapper} >
                    {contactListView}
                    <TextInput
                        style={styles.inputTextMainMessage}
                    />
                </View>
            </View>
        </View>
        </KeyboardAvoidingView>
    );
  }

pressRowContact( rowSelected ){

var found = false;

for(var i = 0; i < this.state.arrayContactsSelected.length; i++) {
    if (this.state.arrayContactsSelected[i].userID == rowSelected.userID) {
        found = true;
        break;
    }
}

if(found == false){

    var arrayContacts = this.state.arrayContactsSelected.slice()

    arrayContacts.push(rowSelected)

    console.log(arrayContacts)

    this.setState({
        inputText: "",
        arrayContactsSelected: arrayContacts
        });

}else {

    this.setState({
        inputText: "",
        });

}

}

0 个答案:

没有答案
相关问题