React-Native：无法导航到第二个屏幕

Posted 2023-04-13

【中文标题】React-Native：无法导航到第二个屏幕

【英文标题】：React-Native: Can't Navigate to the Second Screen

【发布时间】：2021-07-02 03:44:24

【问题描述】：

对不起，如果我的问题有点长，但这是我在这里的第一个问题，我真的很想知道我的代码有什么问题。提前谢谢你

我需要一些关于我的 React-Native 应用程序的帮助。所以简而言之，我的应用程序是关于一个登录屏幕（用户名和密码），带有一个用于保存登录的复选框和一个登录按钮。输入用户名和密码后，第二个屏幕应该是一个简单的欢迎屏幕：“欢迎 userName”。如果用户选中保存登录框并按下登录，应用程序将导航到第二个屏幕并且他不能返回（没有返回按钮）并且下次用户打开应用程序时直接将他/她带到第二个屏幕屏幕。

所以，我的问题是我无法导航到第二个屏幕，而且我不知道如何移除后退按钮。 这是我的代码：

App.js：

import React,  Component  from 'react';
import  SafeAreaView,Text,Button  from 'react-native';
import  createStackNavigator  from 'react-navigation-stack';  
import  createAppContainer  from "react-navigation";
import FirstScreen from './first';
import SecondScreen from './second';
import myDB from './myDB';

const AppNavigator = createStackNavigator(
  Login : FirstScreen,
  Welcome: SecondScreen
,

  initialRouteName : "Login"
)

const AppContainer = createAppContainer(AppNavigator)
export default class App extends React.Component

  render()
  
    return<AppContainer/>;
  

first.js：

import React,  Component  from 'react';
import 
  SafeAreaView,
  Text,
  Button,
  TextInput,
  CheckBox,
  StyleSheet
 from 'react-native';
import  createAppContainer  from 'react-navigation';
import  createStackNavigator  from 'react-navigation-stack';
import myDB from './myDB';


class FirstScreen extends Component 

  constructor (props)   
    super(props);    
   

  state = 
    userName: '',
    password: '',
    chkValue: false,
  ;

  handleUserName = (text) => 
    this.setState( userName: text );
  ;

  handlePasword = (text1) => 
    this.setState( password: text1 );
  ;

  openSecondScreen = () => 
    myDB.getData.userName =  this.state.userName;
    myDB.getData.password = this.state.password;
    this.props.navigation.navigate('second');
  ;


  chkChange = (text2) => 
    this.setState( chkValue: text2 );
  ;

  render() 
    return (
      <SafeAreaView style= alignItems: 'center' >

        <Text>Username</Text>

        <TextInput
          style=styles.input
          value=this.state.userName
          placeholderTextColor="white"
          onChangeText=this.handleUserName
        />

        <Text>Password</Text>

        <TextInput
          style=styles.input
          value=this.state.password
          placeholderTextColor="white"
          onChangeText=this.handlePasword
          secureTextEntry="true"
        />

        <SafeAreaView style=styles.checkboxContainer>
          <CheckBox
            value=this.state.chkValue
            onValueChange=this.chkChange
            style=styles.checkbox
          />
          <Text style=styles.label>Save Login</Text>
        </SafeAreaView>

        <SafeAreaView style=styles.view1>
          <Button
            style=styles.btn1
            title="Login"
            onPress=this.openSecondScreen></Button>
        </SafeAreaView>
      </SafeAreaView>
    );
  


export default FirstScreen;

const styles = StyleSheet.create(
  input: 
    height: 30,
    backgroundColor: 'white',
    paddingLeft: 15,
    paddingRight: 15,
    margin: 8,
  ,
  view1: 
    flexDirection: 'column',
  ,
  checkboxContainer: 
    flexDirection: 'row',
    marginBottom: 20,
  ,
  checkbox: 
    alignSelf: 'center',
  ,
  label: 
    margin: 8,
  ,
);

second.js：

import React,  Component  from 'react';
import  SafeAreaView, Text, Button  from 'react-native';
import myDB from './myDB';

class SecondScreen extends Component 
  state = 
    userName: myDB.getData.userName,
    password: myDB.getData.password
  ;
  
  render() 
    const  navigation  = this.props;
    const userName = navigation.getParam('userName', 'No-User');
    const password = navigation.getParam('password', 'No-User');
    
    return (
      <SafeAreaView style= alignItems: 'center' >
        <Text>Welcome this.state.userName</Text>
      </SafeAreaView>
    );
  

export default SecondScreen;

myDB.js：

import React,  Component  from 'react';
class myDb extends Component 
  static myVariable = 
    userName :'',
    password:''
  ;

  static getData = (myVariable) => 
    return myVariable;
  ;


export default myDb;

我使用snack.expo.io 来构建这些应用程序以防万一。

【参考方案1】：

试试下面的小改动

this.props.navigation.navigate('second');

到

this.props.navigation.navigate('Welcome');

因为我们必须使用我们在导航器中指定的键来导航到特定屏幕。

【讨论】：

谢谢，Jignesh！如果您或其他任何人可以帮助我在用户选中“保存登录”框时从第二个屏幕中删除后退按钮，我将不胜感激。

看看这个帖子：***.com/questions/42831685/…