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

Question

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

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

应该改变的主屏幕

我应该可以通过它更改主屏幕的头像屏幕

目标是能够通过下面的<Avatar/>组件来改变<AppContainer/>中显示哪个 Screen。

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

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,
  },
});

Answer 1

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

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

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

代码如下

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")}

您可以参考文档以获取更多详细信息