Need to do something like this
如何在可搜索的列表视图中更改选择项目的背景颜色,当前搜索功能正在运行,但选择的高亮显示无效。错误在哪里?我认为这是与ListView.DataSource创建。请帮我解决这个问题。谢谢!
let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
export default class FirstScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
icon: null,
selectedID: '11731',
};
this.SearchFilterFunction = this.SearchFilterFunction.bind(this);
this.arrayholder = [];
this.getToken();
};
async getToken() {
try {
let tkn = await AsyncStorage.getItem('ACCESS_TOKEN');
if (!tkn) {
} else {
this.setState({ userID: uID, accessToken: tkn, username: un, code: code, isLoading: false },
function () {
this.GetCustomernames();
});
}
} catch (error) {
alert(error);
}
}
GetCustomernames = () => {
return
fetch('http://192.168.1.9:8080/EcnailerM_API/Customers/get_customers.php')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
newds: responseJson.response.data,
dataSource: ds.cloneWithRows(responseJson.response.data),
},
function () {
this.arrayholder = responseJson.response.data;
});
}
}
}
SearchFilterFunction(text) {
const newData = this.arrayholder.filter(function (item) {
const itemData = item.cust_name.toUpperCase();
const textData = text.toUpperCase();
return itemData.search(textData) > -1
});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
});
}
render() {
return (
<TextInput
style={styles.TextInputStyleClass}
onChangeText={(text) => this.SearchFilterFunction(text)}
textAlign={'center'}
keyboardTopOffset={0}
value={this.state.text}
underlineColorAndroid='transparent'
placeholder="Search Here"
/>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
style={{ height: +Dimensions.get('window').height - 200, marginHorizontal: 5, backgroundColor: 'green' }}
/>
}
}
_renderRow(rowData) {
return (
<TouchableHighlight
onPress={() => this.HandleCustomerPress(rowData)}
style={{ margin: 5 }}
>
<View style={[this.state.selectedID == rowData.cust_code
? { backgroundColor: 'gray' }
: { backgroundColor: 'white' }]}>
<Text>{rowData.cust_name} </Text>
</View></TouchableHighlight>
)
}
HandleCustomerPress(rowData) {
this.setState({
selectedID: rowData.cust_code,
dataSource: this.state.dataSource.cloneWithRows(this.state.newds)
});
}
}