react-native学习之入门app

1、项目初始化:

react-native init MyProject

2、启动项目:

cd MyProject
react-native start

新开cmd窗口:

react-native run-android

3、源代码分析:

附上index.android.js文件:

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

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

class MyProject extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Shake or press menu button for dev menu!This is enable hot!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});

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

首先import引入react|react-native的相关组件模块,这样我们自定义组件的时候可以直接返回react自身的元素(react组件自定义时,必须实现render方法,并且返回一个react element,而且有且仅有一个被包含的顶层元素)

然后通过extends继承Component组件,实现render方法,返回一个包含View布局,内嵌三个Text控件的react element,至于Text组件的style定义,同react中一致,可以是一个有效的以大括号括起来的js表达式或对象,如styles,最后通过AppRegistry.registerComponent将组件注册暴露使用。。。

4、真机运行时,可以摇晃手机,在弹出的工具框中选择Reload Js,进行js代码的重新安装,可以直接看到修改后的运行效果,也可以直接单击选中“支持热更新”,从而实现ide中更新后,app端自动更新效果。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 表单

三态复选框的一种常见使用场景是在软件安装时,一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且,该组中的每个选项都可以单独使用双态复选框开启或关闭。

2563
来自专栏林德熙的博客

win10 uwp 获得Slider拖动结束的值

本文讲的是如何获得Slider移动结束的值,也就是触发移动后的值。如果我们监听ValueChanged,在我们鼠标放开之前,只要拖动不放,那么就不停触发,而我们...

361
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

从navigator到react-navigation进阶教程

1843
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

1170
来自专栏糊一笑

移动端效果之Swiper

写在前面 最近在做移动端方面运用到了饿了么的vue前端组件库,因为不想单纯用组件而使用它,故想深入了解一下实现原理。后续将会继续研究一下其他的组件实现原理,有兴...

2928
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

2529
来自专栏谦谦君子修罗刀

React-native-scrollable-tab-view详解

前言:他方山上有佳石,可以用来琢玉器。只有解决了一个红屏,才有机会遇见另一个红屏。只有解决了一个困难,才有机会遇到其他的困难。O(∩_∩)O~生命不息,奋斗不止...

37810
来自专栏非著名程序员

基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解

看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。...

1947
来自专栏前端杂货铺

自动补全搜索实现

目前大多数搜索框都已实现自动补全功能,自己也私底下实现了一个简易版本, 在此总结过程中的一些要点:   1,侦听文本框的value值改变,注意在Ie8及其之前版...

2596
来自专栏九彩拼盘的叨叨叨

前端开发利器:Emmet 介绍 其他

Emmet 是一个能提高前端开发效率的编辑器插件,支持 Sublime,Atom,TextMate,Nodepad++ 等主流编辑器。Emmet 定义了一些缩写...

472

扫码关注云+社区