Question

我遵循了this的答案，以动态地设置我的组件的样式。

这是我的渲染方法：

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.images}
          numColumns={2}
          keyboardShouldPersistTaps={'always'}
          keyboardDismissMode={'on-drag'}
          keyExtractor={item => item.localIdentifier}
          renderItem={({ item, index }) =>

            <TouchableHighlight
              underlayColor='transparent'
              onPress={() => this.openImage(index)}
              onLongPress={() => this.startSelection(item)}
            >
              <View style={[styles.albumContainer, (this.state.selectedItems.indexOf(item)>-1)?styles.selectedItem:styles.unselectedItem]}>
                <Image
                  style={styles.albumThumbnail}
                  source={item.image}
                />
              </View>
            </TouchableHighlight>
          }
        />
      </View>
    );
  }

如您所见，我正在显示带有TouchableHighlight和FlatList的缩略图。当用户按住带有特定平面列表项目的我称为startSelection()的任何图像缩略图时，然后将其添加到状态中。我使用该状态将图片的样式动态设置为：

<View style={[styles.albumContainer, (this.state.selectedItems.indexOf(item)>-1)?styles.selectedItem:styles.unselectedItem]}>
    <Image
        style={styles.albumThumbnail}
        source={item.image}
    />
</View>

这是startSelection()方法：

  startSelection(item) {
    let temp = this.state.selectedItems;
    temp.push(item);
    this.setState({
      selectedItems : temp
    });
  }

这是我的样式表：

const styles = StyleSheet.create({
  selectedItem: {
    borderWidth: 3,
    borderColor: '#22aaff',
  },
  unselectedItem: {
    borderColor: '#000000',
  }
});

但是，当用户按住该视图时，项目将添加到状态，但样式没有改变。请帮我这里出了什么问题!!!

Answer 1

这可以在FlatList docs上找到：

这是一个PureComponent，表示如果支柱保持浅等，它将不会重新渲染。确保您的renderItem函数依赖的所有内容都作为更新后不是===的道具（例如extraData）传递，否则您的UI可能不会根据更改进行更新。这包括数据属性和父组件状态。

因此，您可以像这样将extraData添加到FlatList组件中：

FlatList组件：

<FlatList
  data={this.state.images}
  extraData={this.state} //add this!
  numColumns={2}
  keyboardShouldPersistTaps={'always'}
  keyboardDismissMode={'on-drag'}
  keyExtractor={item => item.localIdentifier}
  renderItem={({ item, index }) =>

    <TouchableHighlight
      underlayColor='transparent'
      onPress={() => this.openImage(index)}
      onLongPress={() => this.startSelection(item)}
    >
      <View style={[styles.albumContainer, (this.state.selectedItems.indexOf(item)>-1)?styles.selectedItem:styles.unselectedItem]}>
        <Image
          style={styles.albumThumbnail}
          source={item.image}
        />
      </View>
    </TouchableHighlight>
  }
/>

PS：如果您的组件状态包含不应重新呈现FlatList的变量，则最好使用extraData = {this.state.selectedItems}，但是当您在setState上调用setState时，您需要确保将不同的引用传递给selectedItems startSelection。像这样：

startSelection(item) {
  let temp = [...this.state.selectedItems];
  temp.push(item);
  this.setState({
    selectedItems : temp
  });
}

Answer 2

用多余的Py_Initialize

main

有条件的样式无法在React Native中使用

2 个答案: