React Native：如何 change/navigate 将屏幕作为子组件？

Question

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

我有一个头像作为导航器，它应该可以让我浏览一些屏幕！其他一些屏幕只能通过我的主屏幕访问。但是当我按下头像中的按钮时，没有任何反应。我不明白如何以及为什么，但我相信我在某处的 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") 但屏幕没有改变。由于传递了导航道具，至少我摆脱了错误。我相信我犯了一个擦洗错误，因为我没有使用 React Native 的经验，我希望一些更有经验的用户可以帮助我 :) 此外，我认为屏幕本身对于解决这个问题并不重要，它是只是一个带有 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）中，然后您将可以访问导航并且一切都会按预期工作。

解决方法：假设要求是将头像放在 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")}

您可以参考 more details

的文档

React Native：如何 change/navigate 将屏幕作为子组件？

React Native: How to change/navigate the Screen as a Childcomponent?

javascript

screen

navigator

reactjs

react-native