React Native：如何以Changenavigate屏幕为Childcomponent？

Question

每一个小小的帮助都是非常感激的

我有一个Avatar作为导航器，它应该允许我在一些屏幕上导航！其他一些屏幕应该只能通过我的主屏幕到达。我有一个头像作为导航器，它应该允许我在一些屏幕上导航！其他一些屏幕应该只能通过我的主屏幕到达。但是当我按下头像中的按钮时，什么都没有发生。我不明白为什么会这样，但我相信我在stackNavigator中犯了一个错误。为了避免任何误解，下面的代码被缩短了，以避免不必要的信息填满页面，所以它并不能1:1反映你在截图中看到的情况。

主屏幕应该改变

头像屏幕，我应该可以通过它来改变主屏幕。

我们的目标是能够改变屏幕的显示方式。<AppContainer/> 纵观 <Avatar/> 组件的下面。

我试着在Avatar.js里面用onPress函数来调用 this.props.navigation.navigate("Agenda") 但屏幕没有变化。至少我摆脱了错误，多亏了导航道具的传递。我相信我犯了一个scrub错误，因为我没有使用react native的经验，我希望一些更有经验的用户可以帮助我：）此外，我不认为屏幕本身对解决这个问题很重要，它只是一个带有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,
  },
});

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

你可以参考文档中的 更多详情