如何在 SmoothPicker 中重新渲染 FlatList 以使用反应挂钩更改数据答案

【问题标题】：How to rerender FlatList inside of SmoothPicker to change data with react hooks如何在 SmoothPicker 中重新渲染 FlatList 以使用反应挂钩更改数据
【发布时间】：2020-02-18 13:31:21
【问题描述】：

我正在尝试创建一个这样的 SmoothPicker：

我正在使用 react-native-smooth-picker 并且一切正常，除非我要换脚。当我更改为英尺时，我希望列表将重新渲染并将数据更改为英尺参数，但它只发生在滚动之后。有没有办法做到这一点？这是我的代码：

const HeightPicker = () => {
   const [isFeet, setIsFeet] = useState(false)
   const listRef = useRef(null)

   let metersHeights = []
   const feetHeights = new Set()
   for (i = 140; i <= 220; i++) {
       metersHeights.push(i)
       feetHeights.add(centimeterToFeet(i))
   }
   const [selected, setSelected] = useState(40)

   return <View
       style={{
           backgroundColor: 'rgb(92,76, 73)',
           paddingBottom: 20
       }} >
       <Toggle
           style={{
               alignSelf: 'flex-end',
               marginVertical: 20,
               marginEnd: 20
           }}
           textFirst="Feet"
           textSecond="Meters"
           onChange={(change) => {
               setIsFeet(change)
           }} />

       <SmoothPicker
           ref={listRef}
           onScrollToIndexFailed={() => { }}
           initialScrollToIndex={selected}
           keyExtractor={(value) => value.toString()}
           horizontal
           showsHorizontalScrollIndicator={false}
           magnet={true}
           bounces={true}
           extraData={isFeet}
           data={isFeet ? [...feetHeights] : metersHeights}
           onSelected={({ item, index }) => setSelected(index)}
           renderItem={({ item, index }) => (
               <Bubble selected={index === selected}>
                   {item}
               </Bubble>
           )}
       />
   </View>
}

【问题讨论】：

标签： react-native render react-hooks react-native-flatlist itemrenderer

【解决方案1】：

您应该分开英尺和米（生成它们的函数）。使用 useState 设置数据并将仪表设为默认值每次切换时使用 useEffect 更改数据。 ... 使用效果（（）=> { 处理数据（isFeet） },[isFeet]);

const handletData = (isFeet) => { 如果（是脚）{ 设置数据（英尺） }别的{ 设置数据（米） } } …… 数据={数据} ...

【讨论】：