React-Native | drawcontent道具.进度返回未定义

Question

我正在尝试构建一个反应原生应用程序。为了制作抽屉部分，我遵循了本教程:https://www.youtube.com/watch?v=NV48FIIWaN0&t=1331s&ab_channel=ByProgrammers .

在本教程中，他正在使用道具。进度更新进度状态，以便计算动画。我有几乎相同的代码，我的不起作用。道具。进度返回未定义

请在这里找到我的代码:

const DrawerNavigator = ({route}) =>{
const [progress, setProgress] = React.useState(new Animated.Value(0))
const scale = Animated.interpolateNode(progress,{
inputRange : [0,1],
outputRange : [0,0.8]
})
const borderRadius = Animated.interpolateNode(progress,{
inputRange : [0,1],
outputRange : [0,25]
})
const animatedStyle = {transform:[{scale}]}

return(
<View style = {styles.mainContainer}>
<Drawer.Navigator

initialRouteName = "FableReader"
screenOptions={{
headerShown: false,
drawerStyle : [styles.drawerContainer],
drawerType : "slide",
overlayColor : "transparent",
sceneContainerStyle : [styles.sceneContainer],

}}
drawerContent = {({...props})=>{
setTimeout(()=>{
setProgress(props.progress)
},0)
return(
<CustomContent {...props} route = {route}></CustomContent>
)
}}
>
<Drawer.Screen name="FableReader">{props => <FableReaderScreen {...props}/>}</Drawer.Screen>
<Drawer.Screen name="LexiqueFable">{props => <LexiqueScreen {...props}/>}</Drawer.Screen>
<Drawer.Screen name="QCM">{props => <QCMScreen {...props}/>}</Drawer.Screen>
</Drawer.Navigator>
</View>

如果你知道错在哪里，你就是我的英雄!

再次感谢;)

Answer 1

DrawerContentprops.progress在React导航中工作6.

在React导航6中你可以使用useDrawerProgress。默认情况下，它返回0或1。使用useLegacyImplementation获取动画:

<Drawer.Navigator
screenOptions={{
drawerPosition: 'left',
drawerType: 'slide',
headerShown: false,
overlayColor: 'transparent',
drawerStyle: {
flex: 1,
width: '75%',
backgroundColor: 'transparent'
},
sceneContainerStyle: {
backgroundColor: 'transparent'
},
}}
initialRouteName="Home"
drawerContent={props => <Sidebar {...props} />}
useLegacyImplementation
>
<Drawer.Screen name="Home" component={Home} />
</Drawer.Navigator>

import React from "react"
import { StyleSheet } from 'react-native'
/* Animation */
import Animated from 'react-native-reanimated'
/* Drawer */
import { useDrawerProgress } from "@react-navigation/drawer"

const Home = props => {
const progress = useDrawerProgress()
const scale = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8],
extrapolate: 'clamp'
})
const borderRadius = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [0, 30],
extrapolate: 'clamp'
})
const style = { borderRadius, transform: [{ scale }] }
return (
<Animated.View style={[style, styles.box]}>
{/* Your content */}
</Animated.View>
)
}
export default Home


const styles = StyleSheet.create({
...
})

Answer 2

首先，你的动画相关代码需要在你的CustomContent组件中，而不是在DrawerNavigator中。

然后删除这个:

const [progress, setProgress] = React.useState(new Animated.Value(0))

并替换为:

const progress = useDrawerProgress();

从@react-navigation/drawer导入useDrawerProgress。

Answer 3

应该把它放在导航器FableReader的布局组件中。同时，你应该使用hook ->useDrawerProgress

import Animated from 'react-native-reanimated';
import React from 'react';
import { useDrawerProgress } from '@react-navigation/drawer';
import { View, Text } from 'react-native';

const FableReader= () => {
const progress = useDrawerProgress();
const scale = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8],
});
const borderRadius = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [0, 25],
});
const animatedStyle = {
borderRadius,
transform: [{ scale }],
overflow: 'hidden',
};
return (
<Animated.View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
...animatedStyle,
}}
>
<Text>FableReader page</Text>
</Animated.View>
);
};
export default FableReader;