反应原生导航 - 另一个组件上的按钮

Question

我正在构建一个应用程序，我想使用 React-navigation 来浏览页面，目前我有两个， HomeScreen和Contact ，我构建了一个表单，所以我必须将不同的组件导入到 app.js 中，就像标题一样，我把按钮放在ContentContainer组件内作为具有 TouchableOpacity 属性的图像导航。

这导致我无法将导航按钮的参数传递给 app.js，当我按下按钮时出现此错误：

类型错误：未定义不是对象（评估“this.props.navigation.navigate”）

这些是涉及导航的组件：

应用程序.js：

import React, { Component } from 'react';
import { StyleSheet, ScrollView, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Header from './app/components/Header';
import Banner from './app/components/Banner';
import ContentContainer from './app/components/ContentContainer';


class HomeScreen extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <Header />
        <Banner />
        <ContentContainer />
        <Button
          title="Go to Details"
          onPress={() => navigation.navigate('Contact')}
        />
      </ScrollView>
    );
  }
}

function Contact() {
  return (
    <ScrollView style={styles.container}>
      <Header />
      <Banner />
    </ScrollView>
  );
}

const Stack = createStackNavigator();

export default function App() {
  console.log('app started');
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Contact" component={Contact} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
}); 

内容容器.js：

import React from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';

import CustomImage from './CustomImage';

export default class ContentContainer extends React.Component {
  render() {
    const { navigate } =this.props.navigation;
    return (
        <View style={styles.contentcontainer}>

            <TouchableOpacity style={styles.col2} 
                onPress={() => navigate('Contact')}
            >
                <View >
                    <CustomImage imageSource={require('../img/img2.jpg')}
                        header='Towels'
                    />
                </View>
            </TouchableOpacity>


            <View style={styles.col1}>
                <CustomImage imageSource={require('../img/img3.jpg')}
                    header='Shoes'
                />
            </View>

            <View style={styles.contentBanner}>
                <CustomImage imageSource={require('../img/img1.jpg')}
                    header='Wristwatch'
                    paragraph='This is an example text'
                />
            </View>

            <View style={styles.col1}>
                <CustomImage imageSource={require('../img/img2.jpg')}
                />
            </View>

            <View style={styles.col2}>
                <CustomImage imageSource={require('../img/img3.jpg')}
                />
            </View>

        </View>
    );
  }
}

const styles = StyleSheet.create({
    contentcontainer: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        padding: 5
    },
    col1: {
        flex: 1,
        padding: 5
    },
    col2: {
        flex: 1.4,
        padding: 5
    },
    contentBanner: {
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 5
    }
});

Answer 1

导航上下文： https : //reactnavigation.org/docs/navigation-context/

在版本 5 的 react-navigation 中，没有像withNavigation()这样的函数，但您可以从 NavigationContext 获取导航。 示例如下：

  componentDidMount() {
    //  Try to get navigation from context
    const navigation = this.context

  }

Answer 2

您可以简单地将导航道具从 HomeScreen 传递到 ContentContainer

<ContentContainer navigation={this.props.navigation}/>

HomeScreen 是堆栈的一部分，因此如果您将其传递给孩子，他们也将获得导航权限，它将获得导航道具。

如果你有一棵长树，你可以使用“useNavigation”钩子来避免将道具传递到多个级别。