使用React Native传递参数

Question

在Login.js代码中，我收到用户名。然后，我用this.props.navigation.navigate("Tabs", { Name: UserName });将其发送到Tabs.js，然后用const Name1 = navigation.getParam('Name', 'UserName');进行获取。现在我的问题是：如何将其从Tabs.js转发到Profile.js并在Profile.js中呈现用户名？或者也许有一种更短的方法我可以做到？

Login.js

fetch('https://lifestormweb.000webhostapp.com/User_Login.php', {
method: 'POST',
headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
},
body: JSON.stringify({

  email: UserEmail,

  password: UserPassword,

  name: UserName

})

}).then((response) => response.json())
    .then((responseJson) => {

     if(responseJson === 'Data Matched')
      {

          this.props.navigation.navigate("Tabs", { Name: UserName });

      }
      else{

        Alert.alert(responseJson);
      }

    }).catch((error) => {
      console.error(error);
    });

}

render() {
return (
  <View style={styles.container}>
   <View style={styles.loginTextCont}>
    <Text style={{fontSize: 36, fontFamily: "Futura" }}>
      Willkommen zu</Text> <Text style={{fontSize: 36, fontFamily: "Futura", color:'#ff0000' }}>LifeStorm!</Text>
    <View style={{width: 10, height: 5 }} />
    </View>
    <TextInput style={styles.inputBox}
        onChangeText={UserName => this.setState({UserName})}
        underlineColorAndroid='#ffffff'
        placeholder="Ihre Name"
        placeholderTextColor = "#ffffff"
        selectionColor="#ffffff"
        keyboardType="email-address"
        onSubmitEditing={()=> this.password.focus()}
        />
    <TextInput style={styles.inputBox}
        onChangeText={UserEmail => this.setState({UserEmail})}
        underlineColorAndroid='#ffffff'
        placeholder="Ihre E-mail"
        placeholderTextColor = "#ffffff"
        selectionColor="#ffffff"
        keyboardType="email-address"
        onSubmitEditing={()=> this.password.focus()}
        />
    <TextInput style={styles.inputBox}
        onChangeText={UserPassword => this.setState({UserPassword})}
        underlineColorAndroid='#ffffff'
        placeholder="Passwort"
        secureTextEntry={true}
        placeholderTextColor = "#ffffff"
        ref={(input) => this.password = input}
        />
     <TouchableOpacity
     style={styles.button}
     onPress={this.UserLoginFunction}
     >
       <Text style={styles.buttonText}>Sich einloggen</Text>
     </TouchableOpacity>
    <View style={styles.signupTextCont}>
       <Text style={styles.signupText}>
       Haben Sie kein Konto?
       </Text>
       <TouchableOpacity onPress={()=>this.props.navigation.navigate("Register")}> <Text style={styles.signupButton}> Sich anmelden</Text></TouchableOpacity>
    </View>
  </View>
);

}

Tabs.js

import React, { Component } from 'react';
import { createBottomTabNavigator } from 'react-navigation';
import { navigation } from 'react-navigation';
import Page1 from '../screens/Page1';
import Page2 from '../screens/Page2';
import Page3 from '../screens/Page3';
import Profile from '../screens/Profile';
import Page4 from '../screens/Page4';

export default class DetailsScreen extends React.Component {

static navigationOptions = {
header: null,
};

render() {
const { navigation } = this.props;
const Name1 = navigation.getParam('Name', 'UserName');
console.log(Name1);

return (
  <Tabnav />
);
}
}

const Tabnav =  createBottomTabNavigator({
Profil: {screen:Profile,},
Page1: {screen:Page1,},
Page2: {screen:Page2,},
Page3: {screen:Page3,},
Page4: {screen:Page4,}
});

Profile.js

 import React, { Component } from 'react';
 import { Text, View, AsyncStorage } from 'react-native';
 import { navigation } from 'react-navigation';
 import { Header } from "react-native-elements";
 import { Name1 } from '../screens/Tabs';

 export default class Profil extends React.Component {

 render() {
 return (
  <View>
    <Header
      centerComponent={{ text: 'Profil', style: { color: '#FF0000', fontSize: 20, fontWeight: 'bold' } }}
      outerContainerStyles={{ backgroundColor: '#ffffff' }}
    />
    <Text>Willkommen { Name1 } </Text>
  </View>
);
}
}