引用错误：找不到变量：导航 [反应本机]

Question

您好。我对React Native很陌生。我正在为应用程序的介绍/欢迎屏幕使用react原生应用程序介绍滑块。其目的是在用户完成操作或按下跳过按钮后导航到登录屏幕。

下面是我在OnboardingScreen中实现的代码。然而，我在导航方面遇到了一个错误。

import {
StyleSheet,
View,
Text,
Image, 
StatusBar
} from 'react-native';
import AppNavigator from '../navigation/Screens';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AppIntroSlider from 'react-native-app-intro-slider';
import Onboarding from 'react-native-onboarding-swiper';
import LoginScreen from '../screens/auth/LoginScreen';
const data = [
{
title: 'Header 1',
text: 'Description.nSay something cool',
image: require('../assets/images/Slider_1.png'),
bg: '#ffffff',
},
{
title: 'Header 2',
text: 'Description.nSay something cool',
image: require('../assets/images/Slider_2.png'),
bg: '#ffffff',
},
{
title: 'Header 3',
text: 'Description.nSay something cool',
image: require('../assets/images/Slider_3.png'),
bg: '#ffffff',
},
];
const styles = StyleSheet.create({
slide: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
image: {
width: 320,
height: 320,
marginVertical: 32,
},
text: {
fontSize: 20,
color: '#000000',
textAlign: 'center',
},
title: {
fontSize: 30,
fontWeight: 'bold',
color: '#000000',
textAlign: 'center',
},
dotStyle: {
backgroundColor: '#000'
},
});
const Stack = createStackNavigator();
function Root() {
return (
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
);
}
export default class OnboardingScreen extends Component {
constructor(props) {
super(props);
this.state = {
showRealApp: false,
//To show the main page of the app
};
}
_onDone = () => {
navigation.navigate('Root', {
screen: 'LoginScreen'
});
//this.props.navigation.navigate('LoginScreen');
//this.setState({ showRealApp: true });
};
_onSkip = () => {
this.setState({ showRealApp: true });
};
_renderItem = ({item}) => {
return (
<View
style={[
styles.slide,
{
backgroundColor: item.bg,
},
]}>
<Text style={styles.title}>{item.title}</Text>
<Image source={item.image} style={styles.image} />
<Text style={styles.text}>{item.text}</Text>
</View>
);
};
_keyExtractor = (item) => item.title;
render() {
return (
<View style={{flex: 1}}>
<StatusBar translucent backgroundColor="transparent" />
<AppIntroSlider
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
bottomButton
showPrevButton
onDone={this._onDone}
showSkipButton={true}
onSkip={this._onSkip}
data={data}
/>
</View>
);
}
}

导航错误

Answer 1

这里有各种各样的错误。首先，我强烈建议你以符合你需求的方式来构建你的RN项目，我不会谈论太多，但我可以提醒你。通常，你有一个单独的文件夹/文件，其中包含你的应用程序的路由，所以把所有与react-navigation相关的代码都移到那里。移动后，您必须创建一个包含欢迎屏幕的新堆栈。因此，它可能看起来像：

const AppContainer = () => (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Intro" component={OnBoardingScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
</NavigationContainer>
)
export default AppContainer

在上面的代码中，我们引入了一个新的stack，它将作为要到达的第一个屏幕。为什么需要这样做？您需要以某种方式告诉react-navigation您正在使用的屏幕，以便导航到它们。添加堆栈后，您将可以访问navigation道具。这里还有另一个更改，您必须使用我们从上面的代码导出的新组件来更改App.js文件，该组件将是项目的根。一旦你完成了这项工作，那么你就可以像这样使用_onDone方法：

_onDone = () => {
/* use the name you used for the stack.
Also, you don't need to specify the screen
for this use case since you are not nesting
the navigators */
this.props.navigation.navigate('Intro');
};

仅此而已。基本上，您需要使用OnBoardingScreen添加一个新堆栈，并开始使用navigation道具