2016-08-28 2 views
0

Ниже приведены коды моей ListView, в основном это список новостей:Выраженного Item Считайте Listview Реагировать Native

<TouchableHighlight 
    onPress={this.changeTextColor.bind(this)} 
    underlayColor={"#E8E8E8"} 
    style={[styles.button]}> 
    <View style={styles.news_item}> 
     <Text style={[styles.news_item_text,{color:this.state.color}]}>{news.title}</Text> 
    </View> 
    </TouchableHighlight> 

changeTextColor(){ 
    console.log('clicked'); 
    this.setState({ 
    color: '#ffffff' 
    }); 
} 

То, что я пытался сделать то, что после нажатия на новость, цвет текста будет изменено с помощью changeTextColor().

Как-то цвет не изменится, любая идея?

+0

'' щелкнул', появляется в консоли? у вас есть метод 'shouldComponentUpdate'? – FuzzyTree

+0

не использовать '.bind (this)'. Пожалуйста, прочитайте эту статью [Не используйте привязку при передаче реквизитов] (https://daveceddia.com/avoid-bind-when-passing-props/) – stereodenis

+1

, даже если это действительно сработало, я ожидал бы, что нажатие любого элемента списка изменит все элементы списка на белый, поскольку все они сопоставляются с {this.state.color}. Я думаю, вам нужно будет обновить источник данных своего списка, чтобы добавить «isRead», а затем использовать это, чтобы решить, какой цвет отображать. –

ответ

0

пример того, что вы пытаетесь сделать, можно найти здесь ... https://github.com/VctrySam/Pokemon/blob/master/app/components/pokedex.js

Вот демонстрационное видео. Посмотрите на части Pokedex вокруг второй 29 https://www.youtube.com/watch?v=RG6FFL2ny3s&feature=youtu.be

здесь он определяет его ListView как таковой (see actual code) ...

<ListView 
     bounce = {false} 
     style = {{flex:1, marginBottom:30 }} 
     dataSource = {this.state.dataSource} 
     renderRow = {(rowData) => this.balls(rowData)} /> 

renderRow Обратите внимание, что звонки this.balls(rowData) проходит в ROWDATA, который используется, чтобы построить в зависимости от того, выбрана ли строка (или мяч) или нет. (See actual code)

balls(x){ 
     if(!x.selected){ 
     return(
      <View> 
      // row definition if NOT selected 
      </View> 
     ) 
     } else { 
     return(
      <View> 
      // row definition if IS selected 
      </View> 
     ) 
     } 
    } 
Смежные вопросы