0

我用 react-native-snap-carousel 做了一个轮播，下面是轮播的代码。在轮播中有选择器和文本输入等。对于渲染功能：

<Carousel
            ref={(c) => { this._carousel = c; }}
            data={this.state.question}
            renderItem={this._renderItem}
            sliderWidth={standard * 1.1}
            itemWidth={standard * 0.9}

            inactiveSlideScale={0.9}
            inactiveSlideOpacity={0.7}

            firstItem={0}

            activeSlideAlignment={'center'}
            containerCustomStyle={styles.slider}
            contentContainerCustomStyle={styles.sliderContentContainer}
              />

细节渲染：

_renderItem ({item, index}) {
  var content;
  switch (item.id) {
      case 1:
          content = <View style={styles.carousel_cell}>
                        <Text style={styles.carouselItemTitle}>{item.displayLabel}</Text>
                        <TextInput style={styles.editor} onChangeText={(text) => this.setState({comment: text})} value={this.state.comment} />
                    </View>;
          break;
      case 2:
          content = <View style={styles.carousel_cell}>
                        <Text style={styles.carouselItemTitle}>{item.displayLabel}</Text>
                        <Picker mode="dropdown"
                        style={styles.picker}
                        selectedValue={this.state.priority}
                        onValueChange={(itemValue) => this.onPriorityChange(itemValue)}>

                          {this.state.list}
                        </Picker>

                    </View>;
          break;
      default:
          content = <View style={styles.carousel_cell}>
                        <Text style={styles.carouselItemTitle}>{item.displayLabel}</Text>
                        <Text>Unknown</Text>
                    </View>;
          break;

  }

  return content;

}

对于事件触发：

onPriorityChange(value) {
    this.setState({priority: value});
}

这里的问题是，当我在 Picker 中选择任何项目后，状态确实得到了更新，但在界面上却没有。一旦触发 onChangeText 事件，就会调用 Picker 的渲染函数。届时 Picker 中的显示也会更新。但是，根据生命周期，当我设置状态时，轮播（包括其单元格）是否应该更新/重新渲染？

轮播中的秒表（来自 react-native-stopwatch-timer）也会有同样的问题。

4

1 回答 1

0

我不知道这个包，但 Carousel 组件似乎继承自 FlatList 组件。

文档说：

通过将 extraData={this.state} 传递给 FlatList，我们确保 FlatList 本身会在 state.selected 更改时重新渲染。如果不设置这个 prop，FlatList 将不知道它需要重新渲染任何项目，因为它也是一个 PureComponent，并且 prop 比较不会显示任何更改。

因此，尝试添加extraData={this.state}到您的 Carousel 组件中。

于 2017-11-30T02:55:15.783 回答