Я не могу понять, как использовать реагирующую навигацию в дочернем компоненте

Question

У меня самое плохое время, когда я пытаюсь понять, как использовать реагирующую навигацию в дочернем компоненте с двойным вложением.Я пытался использовать функции обратного вызова и передавать навигацию в качестве реквизита, но я не могу понять это.Может, кто-то возражает взглянуть?

Я пытался использовать обратные вызовы, а также передавать навигацию в качестве реквизита.Я получаю много ошибок, таких как «не могу найти реквизит, не могу найти навигацию и т. Д.»Помощь очень ценится.

//main function (App.js)

import React from 'react';
import Bar from "./Bar"
import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';


function HomeScreen() {


  return (
      <View>
        <Bar navigation = {this.navigation}/>
      </View>



  );
}


function DetailsScreen() {
  return (
    <Text>Hello from Details screen</Text>
  )
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);


//First Child Component

import React, { Component } from "react";
import {
  Image, StyleSheet, View, Text,Dimensions
} from "react-native";
import Animated from "react-native-reanimated";
import BarButton from "./BarButton"

export default class Bar extends Component {
  bottombarcallback3 = () => this.props.scopeSpecificFunction23();
render() {
  return (
    <View style ={{
      width: 200,
      height: 200,
      backgroundColor: "#C0C0C0",
      flexDirection: 'row',
      justifyContent: 'space-between',
    }}>
      <BarButton navigation = {this.navigation} />
    </View>
  )
}
}

//final child component


import React, { Component } from "react";
import {
  Image, StyleSheet, View, Text,Dimensions, Button
} from "react-native";
import Animated from "react-native-reanimated";
import { createAppContainer, createStackNavigator, StackActions, NavigationActions, withNavigation } from 'react-navigation';

export default class BarButton extends Component {
render() {
  return (
    <View style = {{
      width: 80,
      height: 80,
      backgroundColor: "#DC143C",
    }}>
    <Button
        title="Go to Details"
        onPress={() => {this.props.navigation.navigate('Like')}}
      />
    </View>
  )
}
}

Я просто хочу иметь возможность менять экраны из дочернего компонента.

Answer 1

Для react-navigation они предоставляют компонент более высокого порядка , который позволяет получить доступ к навигации из любого места в дереве, хотя все еще ниже, чем у поставщика навигации (StackNavigatior, TabNavigator и т. Д.). Вы можете изменить свой нижний компонент, чтобы он выглядел так:

// Extra code omitted 

import {withNavigation} from 'react-navigation';

class BarButton extends Component {
  render() {
    return (
      <Button
          title="Go to Details"
          onPress={() => {this.props.navigation.navigate('Like')}}
       />
    )
  }
}

export default withNavigation(BarButton)

Если вам нужно знать, находится ли компонент в фокусе или нет, вы можете использовать withNavigationFocus в точно такой же усадьбе. Этот компонент более высокого порядка вводит navigation в ваш реквизит, так что вы можете использовать его без пропеллерного бурения.

Вот документация для withNavigation https://reactnavigation.org/docs/en/with-navigation.html и withNavigationFocus: https://reactnavigation.org/docs/en/with-navigation-focus.html