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的代码，您可以看到有一个带有onPress方法的TouchableOpacity，它可以正常工作

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

1 个答案: