reactjs - 反应原生导航到另一个类

Question

嗨，我正在使用 stacknavigator 对本机做出反应，这是我的代码

import { NavigationContainer } from '@react-navigation/native';
import {Main} from "./Main";
import {Detail} from "./Detail";
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
       return (
      <NavigationContainer>
      <Stack.Navigator initialRouteName="Main">
        <Stack.Screen name="Main" component={Main} />
        <Stack.Screen name="Detail" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>     
    )  
}
export default App;

在主页上工作正常。我想导航到带有道具数据的详细信息页面。

主页。

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



    export  class Main  extends Component {
    
        constructor(props) {
            super(props);
          this.state = {
            dataSource: [],
            
      
          };
        }
      

……

<Button
        title="Go to Details"
        onPress={() => navigation.navigate('Detail')}

当我按下按钮时它说

也试过这个，但它给出了另一个错误。

我该如何浏览它。谢谢

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

function Main  () {
  const navigation = useNavigation();
          />

新的

我更改了导航代码，现在它可以导航

<Button
        title="Go to Details"
        onPress={() => this.props.navigation.navigate('Details',{list:this.state.dataSource})  }
      />

在详细信息屏幕中，我必须设置状态数据来自道具。就这部分

const { yourParam } = this.props;

export  class Details extends Component {

    constructor() {
      super();
      this.state = {
        dataSource: [],
      
  
      };
    }

标签： reactjsreact-nativenavigation

Answer 1

您不需要useNavigation()（并且您不能在类组件中使用挂钩）您必须使用导航道具。

this.props.navigation.navigate('Detail')

您可以将参数添加到导航功能。

this.props.navigation.navigate('Detail', { yourParam: someData });

在您的Detail组件上，您将能够获得参数。

const Detail = ({ route }) => {
   const { yourParam } = route.params;

   console.log(yourParam);

   return (
     <View />
   );
}

班级：

const { yourParam } = this.props;

export  class Details extends Component {

    constructor() {
      super();
      this.state = {
        dataSource: [],
      
  
      };
    }
    componentDidMount() {
       console.log(this.props.route.params)
    }
   render() {
     return (<View />) 
   }
}