如何突出显示所选择的可搜索Listview项目?

时间:2018-06-19 10:08:31

标签: reactjs react-native background-color

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)
});
}
}

0 个答案:

没有答案