如何在SmoothPicker内部重新渲染FlatList以使用react hooks更改数据

Question

我正在尝试像这样创建SmoothPicker：

我正在使用react-native-smooth-picker，并且一切正常，但当我更改为“脚”时除外。当我更改为Feet时，我希望该列表将重新呈现并将数据更改为Feet参数，但这仅在滚动之后发生。有没有办法做到这一点？这是我的代码：

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>
}

Answer 1

您应分开英尺和米（功能是生成英尺和米）。使用useState设置数据并设置仪表为默认值每次切换时都使用useEffect更改数据。...useEffect（（）=> {handleData（isFeet）}，[isFeet]）;

const handletData =（isFeet）=> {if（isFeet）{setData（英尺）}其他{setData（米）}}....数据= {数据}...