如何在嵌套的TabNavigator中检索参数

Question

我目前有一个StackNavigator，其中包含两个TabNavigator。

AppNavigator.js：

import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
import CharacterTabNavigator from './CharacterTabNavigator';
export default createAppContainer(createStackNavigator({
  Main: MainTabNavigator,
  Character: CharacterTabNavigator,
}));

App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './navigation/AppNavigator';

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };
  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppNavigator />
        </View>
      );
    }
  }
  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require('./assets/images/robot-dev.png'),
        require('./assets/images/robot-prod.png'),
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
      }),
    ]);
  };
  _handleLoadingError = error => {
    console.warn(error);
  };
  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

HomeScreen.js（MainTabNavigator的第一个）：

import React from 'react';
import {
  ScrollView,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
export default class HomeScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };
  constructor(props) {
       super(props);
   }
  render() {
    return (
      <View>
        <ScrollView>
            <TouchableOpacity activeOpacity={0.5} onPress={() => this.props.navigation.navigate('Character',{ name: 'Brent' })}>
                <Text>Character1</Text>    
            </TouchableOpacity>
        </ScrollView>
      </View>
    );
  }
}

然后我尝试在CharacterTabNavigator的第一个屏幕中获取名称

CharacterStatsScreen.js：

import React from 'react';
import {
  Text,
  View,
} from 'react-native';
export default class CharacterStatsScreen extends React.Component {
    constructor(props) {
         super(props);
     }
    render() {
        console.log(this.props.navigation.state);
        const { navigation } = this.props;
        const character = navigation.getParam('name', 'NO-Character');
        return (
            <View>
                <Text>{character}</Text>
                <Text>Stats</Text>
            </View>
        )
    }
}

我已按照此处给出的说明进行操作：https://reactnavigation.org/docs/en/params.html

但是我永远都找不到名字。

我当前的设置是：

• MainTabNavigator
  • 主屏幕
  • LinkScreen
  • SettingScreen
• CharacterTabNavigator
  • CharacterStatsScreen
  • CharacterSpellsScreen
  • CharacterInventoryScreen
  • CharacterJobsScreen

想法是，当您在MainTabNavigator上加载应用程序时，便具有主要功能，并且在主屏幕上，每个角色都有一张卡片，单击该卡片后，我希望能够打开它（使用后退按钮），通过将角色道具传递给CharacterTabNavigator。

当前工作流程，但未检索参数：

我如何传递道具（将是一个javascript对象）？

我还想知道标题的设置问题。