Как записать другие события в FlatList? - PullRequest
Новая
       72

Как записать другие события в FlatList?

0 голосов
/ 26 апреля 2018

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

Вот мой плоский список. 

<FlatList
  data={data}
  renderItem={({ item }) => {
    return <CardItem courseData={item} />
  }}
  ref={this.flatList}
  keyExtractor={
    (item) => { return item.content_address }
  }
  initialNumToRender={10}
  showsVerticalScrollIndicator={false}
  style={{ marginTop: 50 }}
/>

Вот компонент CardItem 

constructor{
    this.state = {change:false}
} 

_onPress = () => {
    this.setState({change: true})
}

render() {
    if (this.state.change) {
        return (//return changes)
    } else {
        return (
            <TouchableOpacity
                ref="myRef"
                activeOpacity={0.5}
                onPress={this._onPress}>
                ... 
            </TouchableOpacity>
        )
    }
}

Теперь мне нужно изменить только один компонент карты ввремя.

Так что, когда пользователь касается 1-го компонента карты, он должен измениться.Но когда пользователь касается второго компонента карты, 1-й должен вернуться к предыдущему состоянию, а 2-й должен измениться.

Я видел документацию FlatList здесь , но не уверен, какие методы могут мне помочь?

1 Ответ

0 голосов
/ 26 апреля 2018

Если вы храните свой переключаемый элемент в родительском состоянии, вы можете проверить и отобразить соответственно. Кроме того, сохранение переключенного значения в дочернем состоянии вызовет ошибку, при которой, если элемент будет перемещен на экран на достаточное расстояние, он будет размонтирован и внутреннее состояние дочернего компонента будет сброшено. Это может привести к нежелательному переключению в вашем списке. Сохранение состояния в родительском компоненте поможет преодолеть эту проблему.

* ** 1003 тысяча два * Пример 
class App extends Component {
  constructor() {
    this.state = { toggledItem: null }
  }

  onPressItem = (itemId) => {
    this.setState({toggledItem: itemId})
  }

  render() {
    <FlatList
      data={data}
      renderItem={({ item }) => {
        return <CardItem 
                  courseData={item} 
                  onPress={this.onPressItem} 
                  toggeled={item.id === this.state.toggledItem} 
                />
      }}
      ref={this.flatList}
      keyExtractor={
          (item) => { return item.content_address }
      }
      initialNumToRender={10}
      showsVerticalScrollIndicator={false}
      style={{ marginTop: 50 }}
    />
  }
}

class CardItem extends Component {
  _onPress = () => {
    this.props.onPress(this.props.courseData.id)
  }
  render() {

      if (this.props.toggeled) {
          return (//return changes)
      } else {
          return (
              <TouchableOpacity
                  ref="myRef"
                  activeOpacity={0.5}
                  onPress={this._onPress}>
                  ... 
              </TouchableOpacity>
          )
      }
  }
}
...