Question

我有2个视图，我想在不使用 createStackNavigator

的情况下从第一个视图转到第二个视图

无需使用导航，因为第一个视图只是一个欢迎屏幕

import React from 'react';
import { View, Text, Button } from 'react-native';

class HomeScreen extends React.Component {

    render() {

        const { navigate } = this.props.navigation;

        return (
            <View>
                <Text>Welcome!</Text>
                <Button
                    title="sign In"
                    onPress={() => navigate('SignInScreen')}
                />

            </View>
        );
    }
}

class SignInScreen extends React.Component {

    render() {
        return (
            <View>
                <Text>Sign In screen</Text>
            </View>
        );
    }
}

export default HomeScreen

我得到的错误是

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

谢谢。

Answer 1

在州上使用国旗。当您单击HomeScreen上的按钮时，它会将标志更改为true，这将允许条件语句调用SignInScreen来呈现。

import React from 'react';
import { View, Text, Button } from 'react-native';

class HomeScreen extends React.Component {
  state = {
    loggedIn: false,
  };

  render() {
    const { navigate } = this.props.navigation;

    return this.loggedIn ? (
      <SignInScreen />
    ) : (
      <View>
        <Text>Welcome!</Text>
        <Button
          title="sign In"
          onPress={() => this.setState({ loggedIn: true })}
        />
      </View>
    );
  }
}

class SignInScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Sign In screen</Text>
      </View>
    );
  }
}

export default HomeScreen;

更改本地反应视图（0.5）

1 个答案: