无法为控制台警告函数组件提供引用。尝试访问此引用将失败。是否要使用React.forwardRef()?请检查“OnboardingScreen”的呈现方法警告:无法为函数组件提供引用。访问此引用的尝试将失败。是否要使用React.forwardRef()?%s%S请检查“OnboardingScreen*”的呈现方法
我收到这个警告,但我无法传送参考
车载屏幕
import React, {useRef, useState} from 'react';
import {Dimensions, View} from 'react-native';
import {ONBOARDING} from '../data/onboarding';
import Onboarding from '../components/ Onboarding/Onboarding';
import OnboardingFooter from '../components/ Onboarding/OnboardingFooter';
import {colors} from '../constants/config';
const windowWidth = Dimensions.get('window').width;
const OnboardingScreen = () => {
const [currentSate, setCurrentState] = useState(0);
const ref = useRef(null);
const updateCurrentState = e => {
const contentOffsetX = e.nativeEvent.contentOffset.x;
const currentSate = Math.round(contentOffsetX / windowWidth);
setCurrentState(currentSate);
};
const nextSlider = () => {
const nextSliderState = currentSate + 1;
if (nextSliderState != ONBOARDING.length) {
const offset = nextSliderState * windowWidth;
ref?.current?.scrollToOffset({offset});
setCurrentState(nextSliderState);
}
};
return (
<View style={{flex: 1, backgroundColor: colors.lightGray}}>
<Onboarding
list={ONBOARDING}
updateCurrentState={updateCurrentState}
ref={ref}
/>
<OnboardingFooter
list={ONBOARDING}
currentSate={currentSate}
nextSlider={nextSlider}
/>
</View>
);
};
export default OnboardingScreen;
入职培训
import React from 'react';
import {Dimensions, FlatList, Image, Text, View} from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const Onboarding = ({list, updateCurrentState, ref}) => {
return (
<FlatList
data={list}
horizontal
ref={ref}
pagingEnabled
onMomentumScrollEnd={updateCurrentState}
contentContainerStyle={{height: windowHeight * 0.75}}
showsHorizontalScrollIndicator={false}
renderItem={({item, index}) => {
return (
<View style={{alignItems: 'center'}}>
<Image
source={item.image}
style={{height: '75%', width: windowWidth}}
/>
<Text
style={{
color: 'white',
fontSize: 22,
fontWeight: 'bold',
marginTop: 30,
}}>
{item.title}
</Text>
<Text
style={{
color: 'white',
fontSize: 13,
marginTop: 5,
maxWidth: '80%',
textAlign: 'center',
lineHeight: 23,
}}>
{item.subtitle}
</Text>
</View>
);
}}
/>
);
};
export default Onboarding;
1条答案
按热度按时间oogrdqng1#
您需要遵循
forwarding ref
概念,请参阅此文档:https://reactjs.org/docs/forwarding-refs.html您的解决方案如下所示:
入职培训