Javascript 解除一个国家；我最近的祖先被一个堆栈填满了，我应该如何实现呢？

基本上，当它结束时，他们实现并完成了calculator类，我感到困惑。大多数混乱是因为我的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>

构造函数（道具）{
超级（道具）；
this.updateInputValue=this.updateInputValue.bind（this）；
此.state={
颜色1:“#A2A2”，
emailValue:“”，//在此处添加状态
};
}
updateInputValue=（事件）=>{
this.props.onEmailInputChange（event.target.value）；
}
navigateToCreatePasswordScreen=（）=>{
this.props.navigation.navigate（“CreatePassword”{
inputValue:this.state.emailValue，
});
};
render（）{
const emailValue=this.props.emailValue；
返回(
{/*电子邮件输入*/}
电子邮件地址
this.setState（{color1:'#F7018D'}）
onBlur={（）=>this.setState（{color1:'#A2A2A2'}）}
/>
this.navigateToCreatePasswordScreen（）}
/> 

我还没有在我的密码页面中实现任何东西，因为我不确定如何调用声明后的状态，但这是我的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>
  
    )
  }
}

构造函数（道具）{
超级（道具）；
this.state={emailValue:''}；
}
导出默认类应用程序扩展组件{
createHomeStack=（）=>
render（）{
const emailValue=this.state.emailValue；
返回(
{this.createHomeStack（）}
)
}
}

如果你正在从一个屏幕移动到另一个屏幕，为什么不将其作为导航道具发送？看起来你已经这样做了。

inputValue:this.state.emailValue

这是我之前的一篇文章，它可能会添加所需的上下文如果你正在从一个屏幕移动到另一个屏幕，为什么不将其作为导航道具发送？看起来你已经在做了这是我以前的一篇文章，它可能会添加所需的上下文