Реактивная навигация не доступна - PullRequest
Новая
       8

Реактивная навигация не доступна

0 голосов
/ 10 мая 2018

Я пытаюсь создать заставку вступления, и когда мне удается изменить экран с WelcomeScreen на LoginScreen, я получаю undefined is not an object (evaluating '_this.props.navigation.navigate').

Вот мой StackNavigator из App.js 

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

Вот код из Welcome.js, где вы можете видеть, что TouchableOpacity с методом 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>
    );
  };

1 Ответ

0 голосов
/ 10 мая 2018

Вам необходимо передать навигационную опору Swiper: 

<Swiper navigation={navigation}>

В качестве альтернативы: 

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

Тогда в Swiper просто позвоните 

onPress={this.props.onStart}
...