反应本机导航到另一个类

debugcn 发表于 Dev

蒙古人

嗨，我很高兴用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: [],
      
  
      };
    }

汉密尔顿

您不需要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 />) 
   }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。