解除状态；我最近的祖先充满了堆栈，我应该如何实施？

如何解决解除状态；我最近的祖先充满了堆栈，我应该如何实施？

我正在关注 https://reactjs.org/docs/lifting-state-up.html，基本上当它结束时，他们实施并完成了计算器类，我感到困惑。大多数混淆是因为我的 app.js 主要只是一个呈现堆栈的页面，而堆栈实际上包含了我的整个应用程序（我不确定这是否是一种好的做法）。

我正在尝试接受用户输入并将其显示在密码页面上。

我的主要问题是；

因为 app.js 是我最近的祖先，所以我需要在那里实现我的状态以在我的两个组件中使用它们。我应该如何使用所涉及的堆栈来实现这一点？
一旦实现，我该如何调用这个状态来显示它？

谢谢大家的帮助！非常感谢，比您知道的要多得多。

我的电子邮件页面

constructor(props) {
    super(props);

    this.updateInputValue = this.updateInputValue.bind(this);

    this.state = {
      color1: '#A2A2A2',emailValue: '',//add state here
    };
  }

  updateInputValue = (event) => {
    this.props.onEmailInputChange(event.target.value);
}

navigatetoCreatePasswordScreen = () => {
  this.props.navigation.navigate("CreatePassword",{
    inputValue: this.state.emailValue,});
};

  render() {

    const emailValue = this.props.emailValue;

    return (
        <View style={styles.containerMain}>
        
        {/* Email Input */}
      <Container style = {styles.emailInput}>
        
        <Form>
          <Item floatingLabel >
            <Label style={{color:this.state.color1}}>Email Address</Label>
                <Input
                value = {emailValue}
                onChange={(this.updateInputValue)}                
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                onFocus={() => this.setState({color1: '#F7018D'})}               
                onBlur={() => this.setState({color1: '#A2A2A2'})}
                />
          </Item>
        </Form>
      </Container>

      <View style={styles.containerBottom}>   
      <ContinueButton
       onPress={() => this.navigatetoCreatePasswordScreen()}
      /> 
      </View>

我还没有在我的密码页面中实现任何东西，因为我不确定一旦声明后如何调用状态，但这是我的 app.js 类，我没有取得太大进展，因为我很困惑。

app.js

constructor(props) {
  super(props);
  this.state = {emailValue: ''};
}

export default class App extends Component {
 
  createHomeStack = () =>
  <NavigationContainer>
  <Stack.Navigator>
  <Stack.Screen name="SplashScreen" component= {SplashScreenPage} options={{headerShown: false}}/>
    <Stack.Screen name="Welcome" component= {WelcomePage} options={{headerShown: false}}/>
    <Stack.Screen name="Login" component= {LoginPage} options={{headerShown: false}}/>
    <Stack.Screen name="SignUpEmail" component= {SignUpEmailPage} options={{headerShown: false}}/>
    <Stack.Screen name="CreatePassword" component= {CreatePasswordPage} options={{headerShown: false}}/>
    <Stack.Screen name="PhoneVerification" component= {PhoneVerificationPage} options={{headerShown: false}}/>
    <Stack.Screen name="Home" component= {HomePage} options={{headerShown: false}}/>
    <Stack.Screen name="YourName" component= {YourNamePage} options={{headerShown: false}}/>
    <Stack.Screen name="ProfilePicUpload" component= {ProfilePicUploadPage} options={{headerShown: false}}/>
    <Stack.Screen name="LikedPage" component= {LikedPage} options={{headerShown: false}}/>
  </Stack.Navigator>
  </NavigationContainer>
 
  render() {

    const emailValue = this.state.emailValue;

    return (
      <View style={styles.welcomeScreen}>
       {this.createHomeStack()}
      </View>
  
    )
  }
}