Question

美好的一天。我是React Native的新手。我正在将react-native-app-intro-slider用于该应用程序的简介/欢迎屏幕。目的是一旦用户完成操作或按跳过按钮，便导航到登录屏幕。

下面是我在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>
    );
  }
}

Navigation error

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道具

ReferenceError：找不到变量：导航[React Native]

1 个答案: