react-navigation

Question

我有一个排行榜，它调用一个组件并将数据传递给它，如下所示：

   _renderItem =({item}) => (
    <childComponent
        key={item._id}
        id={item._id}
        name={item.name}
    />
   );

在 childComponent 中，我尝试这样做：

    <TouchableOpacity onPress={() => this.props.navigation.navigate("Profile", { id: this.props.id})} >
       <View>
         <Right>
              {arrowIcon}
         </Right>
       </View>
    </TouchableOpacity>

我希望它会转到配置文件页面并根据传递给它的 ID 获取正确的数据。问题是，当我单击箭头转到配置文件页面时，出现错误 无法读取属性 'navigate of undefined。我已将排行榜和子组件都放在我的 HomeDrawerrRoutes.js 和 MainStackRouter.js 中。任何帮助都会很棒，谢谢。

Answer 1

这是一个 3 页的示例，展示了如何将 navigate 函数传递给子组件以及如何自定义从 StackNavigator

中发送到屏幕的道具

// subcomponent ... receives navigate from parent
const Child = (props) => {
    return (
        <TouchableOpacity 
            onPress={() => props.navigate(props.destination) }>
            <Text>{props.text}>>></Text>
        </TouchableOpacity>
    );
}
// receives navigation from StackNavigator
const PageOne = (props) => {
    return (
        <View>
            <Text>Page One</Text>
            <Child 
                navigate={props.navigation.navigate} 
                destination="pagetwo" text="To page 2"/>
        </View>
    )
}
// receives custom props AND navigate inside StackNavigator 
const PageTwo = (props) => (
    <View>
        <Text>{props.text}</Text>
        <Child 
            navigate={props.navigation.navigate} 
            destination="pagethree" text="To page 3"/>
    </View>
);
// receives ONLY custom props (no nav sent) inside StackNAvigator
const PageThree = (props) => <View><Text>{props.text}</Text></View>

export default App = StackNavigator({
    pageone: { 
        screen: PageOne, navigationOptions: { title: "One" } },
    pagetwo: { 
        screen: (navigation) => <PageTwo {...navigation} text="Page Deux" />, 
        navigationOptions: { title: "Two" } 
    },
    pagethree: { 
        screen: () => <PageThree text="Page III" />, 
        navigationOptions: { title: "Three" }
    },
});

Answer 2

有一个简单的解决方案，

使用withNavigation。它是一个高阶组件，它将导航道具传递到包装的组件中。

示例子组件

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class ChildComponent extends React.Component {
  render() {
    <View
      onPress = {()=> this.props.navigation.navigate('NewComponent')}>
     ... logic
    </View>

  }
}

// withNavigation returns a component that wraps ChildComponent and passes in the
// navigation prop
export default withNavigation(ChildComponent);

更多详情：https://reactnavigation.org/docs/en/connecting-navigation-prop.html

Answer 3

出于某种原因，如果您不想使用 withNavigation，以下解决方案也适用。您只需将导航作为道具传递给您的子组件。

例如：


export default class ParentComponent extends React.Component {
 render() {
   return (
      <View>
        <ChildComponent navigation={this.props.navigation} />
      </View>
      );
    }
  }

在子组件中：

const ChildComponent = (props) => {
   return (
       <View>
         <TouchableOpacity 
           onPress={() => props.navigation.navigate('Wherever you want to navigate')}      
          />
       </View>
      );
    };
export default ChildComponent;

Answer 4

v5 中引入了 useNavigation 钩子：

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

export function ChildComponent() => {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

文档：https://reactnavigation.org/docs/use-navigation

react-navigation - 从子组件导航

react-navigation - navigating from child component

react-native