代码之家 › 专栏 › 技术社区 › handsome

在react native(0.5)中更改视图

navigation react-native

handsome · 技术社区 · 6 年前

我有两个视图,我想不使用 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')

非常感谢。

1 回复 | 直到 6 年前

AJ Genung 6 年前

在状态上使用标志。当您单击上的按钮时 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;

推荐文章

handsome · 在react native(0.5)中更改视图

6 年前

Noel · 创建XAML启动页并导航到选项卡式页面

6 年前

M'sieur Toph' · Angular 5-在组件内部获取懒散加载的模块根路径

6 年前

Drake · 系统InvalidOperationException:页面不能已有父级

6 年前

Stephan Ahlf · 如何找出触发HTML导航的位置

6 年前

David · 如何返回并刷新Flatter中的上一页?

6 年前

kizawa tomaru · PHP get\u file\u内容会话后页面导航

6 年前

Ali123 · 如何使用Rg。插件。使用Prism弹出Xamarin表单?

6 年前

raj · 部署在tomcat上的angular 4应用程序在okta身份验证后未正确重新路由

6 年前

Tania · 这是javafx中事件过滤器和requstfocus的正确行为吗?

6 年前