Checked — Unchecked не работает в ListView — React Native

друг Я буду интегрировать проверенное - непроверенное в listView. Так что, когда пользователь нажимает на отмеченный, затем сохраняет данные в массиве и не проверяет, тогда я удалю данные. Он работает нормально, но пользовательский интерфейс не будет обновляться после проверки - не проверено.

<List containerStyle={{marginTop : 0 , borderBottomWidth : 0 , borderBottomColor : 'black', borderTopWidth : 0}}>
  <FlatList
    data={this.state.list}
    renderItem={({ item }) => (
      <ListItem containerStyle={{height: 80, backgroundColor : 'transparent', borderBottomWidth : 0, borderTopWidth : 0}}
        title={
          <View style={styles.titleView}>
            <Text style={styles.ratingText}>{item.iWorkerID.vFirstName}</Text>
          </View>
        }
        rightIcon={
           <TouchableOpacity onPress = {() => this.selectedWorker(item)} style={{width: 30, height: 30 , marginTop : 10, marginRight : 30}}>
             <Image style = {{width: 30, height: 30}} source={this.state.selectedList.includes(item) ? require("./Images/uncheckd.png") : require("./Images/checked.png")}/>
             {/* {this.state.selectedList.includes(item) && <Image style = {{width: 30, height: 30}} source={require("./Images/uncheckd.png")}/>}
             {!this.state.selectedList.includes(item) && <Image style = {{width: 30, height: 30}} source={require("./Images/checked.png")}/>} */}

           </TouchableOpacity>
        }
        avatar={<Avatar
          rounded
          medium
          containerStyle={{marginLeft: 30}}
          source={{uri: Globle.IMAGE_URL+item.vProfileImage}}
          activeOpacity={0.7}
        />}
      />
    )}
  />
</List>

И на кнопке проверки/снятия отметки я буду добавлять/удалять объект из массива,

selectedWorker = (data) =>{
  console.log('data is ', data);

  if (!this.state.selectedList.includes(data)) {
      // this.setState({ selectedList : [...this.state.selectedList , data]})
      this.state.selectedList.push(data);
  } else {

    var index = this.state.selectedList.indexOf(data);
    if (index > -1) {
        this.state.selectedList.splice(index, 1);
    }
  }

  this.setState({list : this.state.list})
  console.log('selected list' , this.state.selectedList);
}

Основная проблема: хочу обновить отмеченное/непроверенное изображение в соответствии с массивом selectedList, как я могу обновить элемент в listView.

Что делать внутри метода selectedWorker.

ГИФ :

введите здесь описание изображения


react-native reactjs react-native-ios react-native-android react-native-listview
person Kirit Modi    schedule 10.10.2017    source источник
comment
Я не уверен, в чем ваша проблема. Массив не обновляет элемент, на который вы нажимаете, но обновляет какой-либо другой элемент, например. последний пункт?   -  person palsrealm    schedule 10.10.2017
comment
не изображение не меняется в зависимости от массива.   -  person Kirit Modi    schedule 10.10.2017
comment
Хотите обновить изображение внутри listView при нажатии кнопки. : ‹Стиль изображения = {{ширина: 30, высота: 30}} source={this.state.selectedList.includes(item) ? требуют(./Изображения/uncheckd.png) : требуют(./Изображения/checked.png)}/›   -  person Kirit Modi    schedule 10.10.2017
comment
Не могли бы вы создать плункер для этого?   -  person Vivek Doshi    schedule 10.10.2017
comment
Да, я создам ждать.   -  person Kirit Modi    schedule 10.10.2017
comment
@VivekDoshi, любая идея, тот же код.   -  person Kirit Modi    schedule 10.10.2017
comment
@KiritModi, где ссылка на plunkr?   -  person Vivek Doshi    schedule 10.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

вы используете Flatelist внутри List. Оба являются компонентами списка элементов. вы можете использовать List или Flatelist, но не оба. Я надеюсь, что это поможет вам..

Я пытаюсь сделать Демо похожее на то, что вы хотите.

constructor(props) {
    super(props)
    this.state = {
        list: [
            {
                id: 1,
                name: "Harpal Singh Jadeja",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                id: 2,
                name: "Kirit Mode",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                id: 3,
                name: "Rajiv Patil",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                id: 4,
                name: "Chetan Doctor",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            }]


    };
};


renderListItem = (index, item) => {
    return (
        <View style={styles.notification_listContainer}>
            <Image source={{uri: item.avtar, cache: 'force-cache'}}
                   style={circleStyle}/>

            <View style={{flex: 1, paddingLeft: 10, justifyContent: 'center'}}>
                <Label roboto_medium
                       align='left'
                       color={Color.TEXT_PRIMARY}
                       numberOfLines={1}>
                    {item.name}
                </Label>
                <Label roboto_medium
                       small
                       align='left'
                       color={Color.TEXT_SECONDARY}
                       mt={8}>
                    Programmer
                </Label>
            </View>

            <View style={{justifyContent: 'center'}}>
                <TouchableHighlight
                    style={{
                        backgroundColor: item.isSelected ? Color.BLACK : Color.TEXT_SECONDARY,
                        alignItems: 'center',
                        justifyContent: 'center',
                        height: 40,
                        width: 40,
                        borderRadius: 20
                    }}
                    onPress={this.onSelectWorker.bind(this, index, item)} underlayColor={Color.BLACK}>
                    <Icon name='done'
                          size={20}
                          color={Color.WHITE}/>
                </TouchableHighlight>
            </View>
        </View>
    );

};
onSelectWorker = (index, item) => {
    console.log("Selected index : ", index);
    let tempList = this.state.list;
    tempList[index].isSelected = tempList[index].isSelected ? false : true
    this.setState({
        list: tempList
    });

};
render() {
    return (
        <View style={styles.notification_Container}>
            <FlatList
                data={this.state.list}
                renderItem={
                    ({index, item}) => this.renderListItem(index, item)
                }
                keyExtractor={item => item.id}
                extraData={this.state}
            />
        </View>
    )
}

GIF

person harpalsinh-jadeje    schedule 24.10.2017
comment
Справка по этому вопросу: stackoverflow.com/questions/50073002/ - person Kirit Modi; 28.04.2018

arrow_upward
0
arrow_downward

Вам нужно добавить в свой ListItem ключ, основанный на уникальном идентификаторе элемента, чтобы React мог различать отображаемые элементы.

Когда вы используете индекс массива в качестве ключа, React оптимизирует и не отображает правильно. Что происходит в таком сценарии, можно пояснить на примере.

Предположим, React отображает массив из 10 элементов и 10 компонентов. Предположим, что 5-й элемент затем удаляется. При следующем рендеринге React получит массив из 9 элементов, поэтому React отрендерит 9 компонентов. Это будет отображаться как удаление 10-го компонента вместо 5-го, потому что React не может различать элементы на основе индекса.

Поэтому всегда используйте уникальный идентификатор в качестве ключа для компонентов, отображаемых из массива элементов.

person palsrealm    schedule 10.10.2017
comment
хорошо. Я добавлю ключ, но как обновить изображение, это означает, что данные имеют проверенное изображение или непроверенное изображение. - person Kirit Modi; 10.10.2017