React Native - <1>动手做一个首页

rn

一切从App从首页起,如果你

  1. 环境部署好环境,跑一个HelloWorld
  2. 看过别人的优秀代码
  3. 尝试自己实现一点控件

给自己一个目标,模仿一些已上线的优秀App,各位看官凭自己审美选择。
这里给出模仿教育软件“完美志愿”的首页Demo教程。

demo_home

源码地址,请随手star支持一下~

那么做一个首页需要先有什么知识贮备呢,只要以下。


Api:
  1. AppRegistry
  2. Dimensions
组件:

<1>基础控件

  1. Text
    显示文字,文字控件。
  2. Image
    显示图片,图片控件。
  3. StyleSheet
    存放控件样式,类似CSS。
  4. TouchableNativeFeedback
    Android特有按钮,具有触摸反馈波纹效果。
  5. StatusBar
    状态栏控件,原生顶部。

<2>控件容器

  1. View
    可包容所有控件,最基础的组件。
  2. ListView
    列表控件,最常用的列表控件。
  3. ScrollView
    布局滑动控件,包含住的所有控件为一个整体。
  4. ViewPagerAndroid
    页片布局控件,用于切换页面。

先大概浏览过上面控件的基础使用方法,就可以动手做首页了。

知识点:
  1. 组件间的通信
    父对子通信 子对父通信

(以上没提到的,不是说不重要不基础,只是简单着来,看上面就可以动手实践。)

一个组件js文件的基础框架,做控件、页面第一步总是要新建以下这个基础class,ES6语法。(可直接复制使用)


import React,{ Component } from 'react';

import{
    View,
    StyleSheet
} from 'react-native';


export default class Demo extends Component{

    render(){
        return(
            <View style = {styles.container}>

            </View>
        );
    }

}

const styles = StyleSheet.create({
    container : {
        flex : 1
    }
});

以上,完毕。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,989评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 为爱分享第80天! ㊀ 天下之人,分为四种: 其一,既不能屈,也不能伸。他们一生都在错过、放过、悔过,却不曾得到过...
    幸福之巢阅读 165评论 0 0
  • 都说我的狗狗丑,在我的心里他是如此的帅
    山娃爱摄影阅读 207评论 0 2
  • 善待自己说起来简简单单的一件事 但是做起来真的很难。我们都知道如何去善待别人~却从来不知如何善待自己。
    馮ZhenYu阅读 255评论 0 0