2-4 关于 react-navigation 组件 页跳转问题:

来源:4-4 项目启动引导流程实现

22不小了

2017-05-21

http://szimg.mukewang.com/5921648200017ba204880721.jpg

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
    RefreshControl,
    Button
    } from 'react-native';
import { StackNavigator } from 'react-navigation';
import WelcomePage from './WelcomePage';
export default class Setup extends Component {
    constructor(props) {
        super(props);

        this.onLoad();

    }

    onLoad(){
        setTimeout(()=>{
            this.setState({isLoading:false})
        },2000);
    }
    static navigationOptions = {
        title: 'Welcome',
    };

    render() {
        const { navigate } = this.props.navigation;
        return ( <View>
            <Text>Hello, Chat App!</Text>
            <Button
                onPress={() => navigate('Chat')}
                title="Chat with Lucy"
                />
        </View>);
    }
}
const SimpleApp = StackNavigator({
    Home: { screen: Setup },
    Chat: { screen: WelcomePage },
});
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    row:{
        height:70
    },
    tips:{
        fontSize:18
    },
    line:{
        height:1,
        backgroundColor:'black'
    }
});

AppRegistry.registerComponent('simple_app', () => simple_app);

还请老师帮忙分析一下,我这个是什么问题,我照着官方文档的例子模仿写了一个,由于英语水平问题,可能是那些地方没有领会,还请老师指点

写回答

3回答

日月小明

2017-05-31

错误信息是:

const { navigate } = this.props.navigation;

this.props.navigation   为 undefined. 

你这个本身就是根组件,怎么会有this.props.navigation这个属性呢?

this.props.navigation 应该是父组件,就是调用这个组件的时候传递过来的属性。

还有你的 `index.android.js`这个文件需要导入  `import Setup from './js/page/Setup` 这个文件的。

然后Setup这个文件最后一行不需要,重复注册了。

建议你先去看看react的基础知识,先把react的基本语法熟悉一下。。

0
1
22不小了
非常感谢!
2017-06-06
共1条回复

tomatoCoder

2017-05-27

AppRegistry.registerComponent('simple_app', () => simple_app);

AppRegistry.registerComponent('simple_app', () => Setup);      入口用了两次?

1
0

22不小了

提问者

2017-05-21

问题补充:

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    } from 'react-native';


AppRegistry.registerComponent('simple_app', () => Setup);


我是从这个页面进入上面的Setup.js 文件的
0
0

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程