React Native：如何将屏幕更改/导航为子组件？答案

【问题标题】：React Native: How to change/navigate the Screen as a Childcomponent?React Native：如何将屏幕更改/导航为子组件？
【发布时间】：2020-05-22 17:43:51
【问题描述】：

非常感谢每一个小小的帮助！

我有一个 Avatar 作为导航器，它应该可以让我在一些屏幕上导航！其他一些屏幕只能通过我的主屏幕访问。但是当我按下头像中的按钮时，什么也没有发生。我不明白如何以及为什么，但我相信我在某个地方的 stackNavigator 中犯了错误？只是为了避免任何误解，下面的代码被缩短以避免在页面中填充不必要的信息，因此它并没有反映您在屏幕截图中看到的 1:1。

Home Screen which should change

Avatar Screen through which I should be able to change the Home Screen

目标是能够通过下面的<Avatar/> 组件更改<AppContainer/> 中显示的屏幕。

我尝试在 Avatar.js 中使用 onPress 函数调用this.props.navigation.navigate("Agenda")，但屏幕没有改变。由于传递了导航道具，至少我摆脱了错误。我相信我犯了一个擦洗错误，因为我没有使用本地反应的经验，我希望一些更有经验的用户可以帮助我:)此外，我认为屏幕本身对于解决这个问题并不重要，它是只是一个带有 panresponder 和动画视图的类组件。

import React from "react";
import { StyleSheet, View, StatusBar } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import Avatar from "../coreComponents/Avatar";

import ScHome from "../screens/ScHome";
import ScNewMedi from "../screens/ScNewMedi";
import ScCalendar from "./ScAgenda";

const AppStack = createStackNavigator(
  {
    Home: {
      screen: ScHome,
    },
    Medis: {
      screen: ScNewMedi,
    },
    Agenda: {
      screen: ScCalendar,
    },
  },
  {
    headerMode: "screen",
    initialRouteName: "Home",
    backBehavior: "order",
  }
);

const AppContainer = createAppContainer(AppStack);

export default class ScDefault extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          barStyle="light-content"
          backgroundColor="transparent"
          translucent
        />
        <AppContainer />
        <Avatar navigation={this.props.navigation} />
      </View>
    );
  }
}

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

【问题讨论】：

头像为什么放在AppContainer外面？

标签： javascript reactjs react-native screen navigator

【解决方案1】：

问题是您试图在导航不可用的 Appcontainer 之外访问导航。

简单修复：将 Avatar 组件移动到您的一个主屏幕（ScHome、ScNewMedi、ScCalendar）内，您将可以访问导航，一切都会按预期工作。

解决方法：假设要求是在 AppContainer 之外拥有 Avatar，那么您必须使用导航服务之类的东西。

代码如下

let _navigator;

const setTopLevelNavigator=(navigatorRef) =>{
  _navigator = navigatorRef;
}

const  navigate=(routeName, params) =>{
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

//Change your app.js
 return <View style={{flex:1}}>
      <AppContainer
    ref={navigatorRef => {
      setTopLevelNavigator(navigatorRef);
    }}
  />
 <Avatar navigate={navigate} /></View>;

   //Inside the Avatar onPress you can can do this
   onPress={()=>this.props.navigate("Home")}

您可以参考more details 的文档

【讨论】：