反應原生導航 - 另一個組件上的按鈕

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”鈎子來避免將道具傳遞到多個級別。