目前，使用FlatList通過水平分頁來渲染專案，在螢屏上一次只有一個視圖是可見的，但是當我把'Animated.View'傳遞給FlatList的[renderItem]時，每當當前可見的專案被點擊進行影片，它也會在后臺對所有其他隱藏的視圖進行影片，所以為了優化性能，我嘗試分配唯一的參照物如下
//renderItem
const Slide = ({item, index}) => {
const paginatedRefs = {}; //添加一個物件，因為我們需要一個以上的ref({})
//Animated.View這里使用的是-import 'Animated' from react-native
回傳 (
<View
ref={(ref) => (
(paginatedRefs.current[item.id] = ref)。
console.log(paginatedRefs[item.id], item.id)
)}>
<Animated.View
style={[
animatedStyles.hidden,
rotateFront, //interpolated設定
]}>
<FlipCard inputRef={frontRef} item={item}。/>
</Animated.View>
<Animated.View
style={[
[
animatedStyles.hidden,
animatedStyles.back,
rotateBack, //interpolated設定
],
]}>
<FlipCard inputRef={backRef} item={item}。/>
</Animated.View>
<View>
<Text onPress={doAFlip}>Flip</Text>
</View>
</View>
);
我現在的問題是，我如何在當前可見的專案上動態地設定'rotateFront/rotateBack'的樣式，或者是否有一個更有效的替代方法來使用'函陣列件'解決這個問題
//function that detects the current visible item
const updateCurrentSlideIndex = (e) => {
//const contentOffsetY = e.nativeEvent.contentOffset.y。
const contentOffsetX = e.nativeEvent.contentOffset.x;
const currentIndex = Math.round(contentOffsetX / width);
setCurrentSlideIndex(currentIndex);
console.log('當前幻燈片', currentIndex)。
//***********
//試圖在當前可見的專案上鏈接動態樣式，以實作單獨的影片效果
//***********
//paginatedRefs.current.setNativeProps({})。
//let nameOfRef = paginatedRefs.current.getAttribute（"data-name"）。
};
此外，這是FlatList的配置
<View style={styles.bodyContainer}>
<ScrollView ref={refScroll}>
<FlatList
ref={ref}
資料={slides}
keyExtractor={(item, index) => item.id}
renderItem={_renderItem}。
pagingEnabled={true}
水平={真}。
onMomentumScrollEnd={updateCurrentSlideIndex}。
showsHorizontalScrollIndicator={false}。
contentContainerStyle={styles.bodyScrollView}。
/>
</ScrollView>
</View>
預先感謝
uj5u.com熱心網友回復：
我從你的問題中得到的是，當用戶點擊一個視圖時，你想給它制作影片，這個視圖在Flatlist的renderItem中。如果是這樣，你需要把renderitem作為React Component，并在其中創建ref，當你在組件中使用ref呼叫影片時，它將給唯一可見的專案制作影片。
const Slide = ({item,index})=> {
const ref = useRef(null);
return (<Animated.View ref = {ref}>
<TouchableOpacity onPress = {()=> {ref.current.animate....}}>
...
</TouchableOpacity>
</Animated.View>
}
由于Flatlist希望renderItem是一個函式，所以它不接受Slide，因為它是React組件，所以你需要做一些事情
<Flatlist
renderItem = {(props)=> <Slide {...props}/> }
..../>。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/332584.html
標籤：
上一篇：為什么Scala的Set.subsets()方法被定義為一個空父方法？
下一篇：將資料從文本檔案傳遞給建構式