react native组件的创建

react文件加载顺序：

react项目启动后，先加载index.js。在index.js中可以指向首页。

import { AppRegistry } from 'react-native';

import App from './App';

AppRegistry.registerComponent('myExample', () => App);

以上代码中，首页指向了app.js。如果希望指向其他定义的页面，可以这样写

import page from './page ';

AppRegistry.registerComponent('myExample', () => page );

一、ES6定义组件（推荐）

1、新建一个myComponent.js。首先引入需要的依赖

import React, {Component} from 'react'

import {

    Platform,

    StyleSheet,

    Text,

    View

} from 'react-native';

2、定义组件类，组件需要继承Component ，render()方法里为组件渲染的ui部分，是必须的。

export default class myComponent extends Component {

    render() {

        return (

            <Text>

              Welcome to React Native -androidaa!

            </Text>

        );

      }

}

3、在需要使用的组件中引入

import MyComponent from './myComponent'

render() {

    return (

        <MyComponent/>

    );

  }

4、如何在es6中使用父组件向子组件传值

子组件使用this.props，用于接收父组件传值

export default class myComponent extends Component {

    render() {

        return (

            <Text>

              Welcome to React Native -androidaa {this.props.name}!

            </Text>

        );

      }

}

父组件定义属性值

<MyComponent name='小明'/>

二、函数式定义组件（无状态，不能使用this，也没有完整的生命周期方法）

1、定义

function myComponent() {

    return (

        <Text>

            Welcome to React Native -android!

        </Text>

    )

}

module.exports = myComponent

2、如何在函数式里使用父组件向子组件传值　

子组件使用props，用于接收父组件传值

function myComponent(props) {

    return (

        <Text>

            Welcome to React Native -android{props.name}!

        </Text>

    )

}

父组件定义属性值

<MyComponent name='小明'/>

如何打开控制台

手机摇一摇，点击remote js debugging。

总结：

1、es6和函数式组件，在父子组件传值时，es6使用this.props.xx，函数式使用props.xx。

巴特西

react native组件的创建

react native组件的创建

react文件加载顺序：

一、ES6定义组件（推荐）

二、函数式定义组件（无状态，不能使用this，也没有完整的生命周期方法）

如何打开控制台

总结：

最新文章

热门文章