未访问 React Navigation

Question

我正在尝试创建一个简介滑动器，当我将屏幕从 WelcomeScreen 更改为 LoginScreen 时，我收到 undefined is not an object (evaluating '_this.props.navigation.navigate')。

这是我来自 App.js

的 StackNavigator

export const SignedOut = StackNavigator({
  WelcomeScreen: {
    screen: Welcome
  },
  SwiperScreen: {
    screen: Swiper
  },
  LoginScreen: {
    screen: Login
  }
});

这是来自 Welcome.js 的代码，您可以在其中看到 TouchableOpacity with onPress 方法可以正常工作

import Swiper from "./Swiper";

export default class Welcome extends Component {
  static navigationOptions = { header: null };
  render() {
    const { navigation } = this.props;
    return (
      <Swiper>
        <View style={styles.slide}>
          <FontAwesome name="airplane" {...iconStyles} />
          <Text style={styles.header}>title one here</Text>
          <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, tellus at consectetur facilisis, quam nibh convallis diam, ullamcorper egestas dolor massa a augue.</Text>
        </View>
        <View style={styles.slide}>
          <FontAwesome name="airballoon" {...iconStyles} />
          <Text style={styles.header}>title two here</Text>
          <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, tellus at consectetur facilisis, quam nibh convallis diam, ullamcorper egestas dolor massa a augue.</Text>
        </View>
        <View style={styles.slide}>
          <FontAwesome name="amazon" {...iconStyles} />
          <Text style={styles.header}>title three here</Text>
          <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, tellus at consectetur facilisis, quam nibh convallis diam, ullamcorper egestas dolor massa a augue.</Text>
          <TouchableOpacity onPress={() => navigation.navigate("LoginScreen")}>
              <Text>START NOW</Text>
          </TouchableOpacity>
        </View>
      </Swiper>
    );
  }
}

这里是 Swiper.js

按钮的渲染图

renderButton = () => {
    const lastScreen = this.state.index === this.state.total - 1;
    return (
      <View
        pointerEvents="box-none"
        style={[styles.buttonWrapper, styles.fullScreen]}
      >
        {lastScreen ? (
          <Button
            text="Start Now"
            onPress={() => this.props.navigation.navigate("LoginScreen")}
          />
        ) : (
          <Button text="Continue" onPress={() => this.swipe()} />
        )}
      </View>
    );
  };

Answer 1

您需要将导航道具传递给 Swiper:

<Swiper navigation={navigation}>

或者：

<Swiper onStart={() => this.props.navigation.navigate("LoginScreen")}>

然后在Swiper中调用

onPress={this.props.onStart}

未访问 React Navigation

React Navigation does not being accessed

reactjs

react-native

stack-navigator