我正在使用 React Native 并使用組件 ref 構建了一個自動滾動平面串列來訪問 scrollToIndex 方法。
一切正常，直到我打開 SideMenu 以某種方式導致 flatList.current 變為空，從而導致應用程式錯誤。
我想知道是否有人知道為什么會發生這種情況？感謝幫助。謝謝
應用程式.js
import React, {useState} from 'react';
import { StyleSheet, Text, Image, View, SafeAreaView, ScrollView } from 'react-native';
import Background from './components/Background'
import Header from './components/Header'
import SideMenu from './components/SideMenu';
import SearchBar from './components/SearchBar'
import Swiper from './components/Swiper'
export default function App() {
const [ sideMenuOpen, setSideMenuOpen ] = useState(false)
const hamburgerHandler = () => {
sideMenuOpen ? setSideMenuOpen(false) : setSideMenuOpen(true)
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.background}>
<Background />
</View>
<Header sideMenuOpen={sideMenuOpen} setSideMenu={hamburgerHandler} />
<SideMenu sideMenuOpen={sideMenuOpen} />
<SearchBar />
<View style={sideMenuOpen ? styles.contentContainer : {height: '100%'}} >
<ScrollView>
<Swiper header={'Movies & TV: Coming Soon'} interval={6000} />
</ScrollView>
</View>
</SafeAreaView>
);
}
Swiper.js
import React, { useEffect, createRef } from "react";
import { View, Text, Image, FlatList, StyleSheet, Dimensions, } from 'react-native'
const Slider = props => {
const flatList = createRef()
const renderItem = ({ item }) => <Item content={item} />
const header = props.header ? <Text style={styles.header}>{props.header}</Text> : <Text>
</Text>
let currentSlide = 0
let timer
const _incrementSlider = (scale=0) => {
currentSlide =scale
if (currentSlide > data.length-1) currentSlide = 0
flatList.current.scrollToIndex({
index: currentSlide,
animated: true
})
}
const _startAutoPlay = () => {
if (!props.interval) return
timer = setInterval(() => _incrementSlider(1), props.interval)
}
const _stopAutoPlay = () => {
clearInterval(timer)
timer = null
}
//ComponentDidMount
useEffect(() => {
console.log('mounted')
_startAutoPlay()
}, [])
//ComponentWillUnmount
useEffect(() => {
return () => {
console.log('unmounted')
_stopAutoPlay()
}
}, [])
return (
<View style={styles.container}>
{header}
<FlatList
data={data}
pagingEnabled={true}
horizontal={true}
renderItem={renderItem}
keyExtractor={item => item.id}
ref={flatList}
/>
</View>
)
}
uj5u.com熱心網友回復：
每次該組件渲染時，您都會createRef再次呼叫，這會創建一個全新的 ref。作為一個新的參考，它有null它的.current屬性。createRef并不是真的要在函陣列件中使用，而是應該使用useRef. 它只會創建一次 ref，并在每次渲染時將其回傳給您。
import React, { useEffect, useRef } from "react";
// ...
const flatList = useRef();
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406372.html
標籤：