react-native-swiper 不支持 this.props.navigation.navigate答案

【问题标题】：react-native-swiper doesnt support this.props.navigation.navigatereact-native-swiper 不支持 this.props.navigation.navigate
【发布时间】：2020-07-06 21:07:00
【问题描述】：

我是 react native 的新手，我正在尝试在我的项目中实现 react-native-swiper

render() {
    return (
      <Swiper
        loop={false}
        showsPagination={false}
        index={1}>

        <View style={this.viewStyle()}>
          <ActivityScreen />
        </View>

        <Swiper
          horizontal={true}
          loop={false}
          showsPagination={false}
          index={1}>
          
          <View style={this.viewStyle()}>
<YourGroups  />
        </View>
        
        </Swiper>     

          <View style={this.viewStyle()}>
            <AlertScreen />
          </View>

        </Swiper>
      
    )
  }
}

但是当我在组件屏幕并点击按钮时

<Button title="thank you" onPress={()=>this.props.navigation.navigate("ThankScreen")} ></Button>

我收到一个错误

undefined 不是一个对象（评估 'this.props.navigation.navigate'）

【问题讨论】：

你能显示那个<Button>的代码吗？它在哪个组件中？

标签： react-native navigation expo react-props swiper

【解决方案1】：

我遇到了同样的问题并使用 React Navigation 5 修复了它，它允许您使用 useNavigation 挂钩从任何组件访问导航道具：

import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const GoToButton = ({ screenName }) => {
  const navigation = useNavigation();

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

【讨论】：