ListViewを使用してTextInputを自動作成しました。リストと入力フィールドをビューに入れ、flexDirectionプロパティをrowに設定しました。 1つのフィールドに入力すると、他のフィールドのリストもレンダリングされます。私は同じ機能を使って別のフィールドでした。しかしそれはレンダリングされません。 flexDirectionを行に変更してもこの問題は発生しません。どのように入力フィールドに固有のレンダリングリストを作成するのですか?ここにビューと機能に関連する私のコードです。React Native - double ListViews関数呼び出し時に同時にレンダリングする
-----------------ビューのコード--------------削除するには
<View style={styles.float}>
<View style={[styles.flex]}>
<Text style={styles.modalLabels}>Tags</Text>
<TextInput
style={styles.input}
defaultValue={this.state.fillTags}
onChangeText={(id) => this.search(id, 'tags')}
underlineColorAndroid='#bcbcbc'
/>
<ListView
style={[styles.listview]}
dataSource={ds.cloneWithRows(this.state.searchedTags)}
renderRow={(key) => this.renderList(key, 'tags')}
/>
</View>
<View style={[styles.flex]}>
<Text style={styles.modalLabels}>Location</Text>
<TextInput
style={styles.input}
defaultValue={this.state.fillLocation}
onChangeText={(id) => this.search(id, 'location')}
underlineColorAndroid='#bcbcbc'
/>
<ListView
style={[styles.listview]}
dataSource={ds.cloneWithRows(this.state.searchedLocation)}
renderRow={(key) => this.renderList(key, 'location')}
/>
</View>
</View>
-----------機能---------------------
autofill = (item,key) => {
if(key === 'rider'){
this.setState({fillRider: item.name, searchedRiders: []})
}
else if(key === 'tags'){
this.setState({fillTags: item.name, searchedTags: []})
}
else if(key === 'location'){
this.setState({fillLocation: item.name, searchedLocation: []})
}
}
renderList = (item, key) => {
const renderItem = (
<TouchableOpacity>
<Text
style={styles.searchText}
onPress={() => this.autofill(item,key)}>
{item.name}
</Text>
</TouchableOpacity>
)
if(key === 'rider'){
return renderItem
}
else if(key === 'tags'){
return renderItem
}
else if(key === 'location'){
return renderItem
}
}
search = (searchedText, id) => {
if(id === 'riders'){
var searchResult = riders.filter(function(rider){
return rider.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
});
this.setState({searchedRiders: searchResult, searchedTags: [], searchedLocation: []})
}
else if(id === 'tags'){
var searchResult = tags.filter(function(tags){
return tags.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
});
this.setState({searchedTags: searchResult, searchedLocation: [], searchedRiders: []})
}
else if(id === 'location'){
var searchResult = location.filter(function(location){
return location.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
});
this.setState({searchedLocation: searchResult, searchedRiders: [], searchedTags: []})
}
}
また、ListViewを使用しているときに「空のセクションのヘッダー」警告を削除する方法を教えてもらえます。 –
まだ答えを探しています..... –