react-native - 如何使用 React Navigation 在 RootStack 设置中将对象发送到姊妹屏幕上的等待函数？

Question

我从高处和低处寻找，但似乎找不到答案。我正在开发一个收集大量信息并根据用户的答案创建对象的应用程序。

这是我在 App.js 中的设置：

import React from 'react';
import { View, Text, Button, Alert } from 'react-native';
import {
  createAppContainer,
  StackActions,
  NavigationActions,
  createSwitchNavigator,
} from 'react-navigation'; // Version can be specified in package.json
import { createStackNavigator } from 'react-navigation-stack';
....

const check = false;

const AppStack = createStackNavigator({
 DashboardScreen: {
    screen: Dashboard,
  },
  Workflow: {
    screen: Workflow,
    headerRight: () => (
      <Icon
        containerStyle={{ paddingHorizontal: 20 }}
        name={unsubscribe() ? 'unlink' : 'link'}
        type="font-awesome"
        size={20}
        color={unsubscribe() ? common.colors.success : common.colors.error}
      />
    ),
  },


RequestsScreen: {
    screen: Requests,
    headerRight: () => (
      <Icon
        containerStyle={{ paddingHorizontal: 20 }}
        name={unsubscribe() ? 'unlink' : 'link'}
        type="font-awesome"
        size={20}
        color={unsubscribe() ? common.colors.success : common.colors.error}
      />
    ),
  },
  SubmitScreen: {
    screen: Submit,
    headerRight: () => (
      <Icon
        containerStyle={{ paddingHorizontal: 20 }}
        name={unsubscribe() ? 'unlink' : 'link'}
        type="font-awesome"
        size={20}
        color={unsubscribe() ? common.colors.success : common.colors.error}
      />
    ),
  },
  Photos: {
    screen: PhotosScreen,
    headerRight: () => (
      <Icon
        containerStyle={{ paddingHorizontal: 20 }}
        name={unsubscribe() ? 'unlink' : 'link'}
        type="font-awesome"
        size={20}
        color={unsubscribe() ? common.colors.success : common.colors.error}
      />
    ),
  },
 NotesScreen: {
    screen: Notes,
    headerRight: () => (
      <Icon
        containerStyle={{ paddingHorizontal: 20 }}
        name={unsubscribe() ? 'unlink' : 'link'}
        type="font-awesome"
        size={20}
        color={unsubscribe() ? common.colors.success : common.colors.error}
      />
    ),
  };

const AuthStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerShown: false,
    },
  },
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      headerShown: false,
    },
  },
  transitionConfig: () => fromRight(),
});

class ModalScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      sample: '',
    };
  }

  textFunc = (text) => {
    Alert.alert(text);
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>{this.state.sample}</Text>
        <Text style={{ fontSize: 30 }}>This is a modal!</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Main: {
      screen: AppStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

const AppContainer = createAppContainer(RootStack);

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppContainer,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'AuthLoading',
    }
  )
);

用户正在完成 SubmitScreen 上的对象，需要将该对象发送到 MyModal 屏幕。我真的不在乎这个屏幕是否是模态的。它将被隐藏，因为它需要在后台渲染视图并从这些视图生成 PDF。我希望用户停留在 SubmitScreen 上，直到该过程完成以显示成功或错误消息。

我将如何实现这个目标？小警告：我们还没有准备好升级到 React Navigation v5。我们正在运行 v4。

标签： react-nativereact-navigation