zoukankan      html  css  js  c++  java
  • React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧!

    一、环境搭建

    首先声明一下,本人现在用的编辑器是SublimeText3。其实这种教程网上有很多,我只是单纯地把自己的一些经验写出来,也是自己的经历,有地方不对的请指正,感激不尽!

    1.Mac开发RN环境搭建

    1>安装homebrew,Mac上缺少包管理工具,所以安装Homebrew包管理管理我们需要安装的Node.js等工具和软件。

    打开终端输入:  

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

    sudo chown -R `whoami` /usr/local

    2>安装Node.js,既然安装好了Homebrew,那么我们通过HomeBrew来安装Node.js

    brew install node

    3>安装React Native的命令行工具(react-native-cli)

    npm install -g react-native-cli

    如果你看到EACCES: permission denied这样的权限报错,那么修复权限问题

    sudo chown -R `whoami` /usr/local

    4>开发iOS必不可少的工具Xcode,这个可以直接在AppStore里面下载

    5>安装WatchMan

    WatchMan是由Facebook提供的监视文件系统变更的工具。

    brew install watchman

    6>OK,基本的已经安装完毕,现在可以测试安装了,先创建RN项目

    react-native init AwesomeProject

    下面这两句如果不熟悉终端的可以不看,直接打开文件夹找到ios文件夹,运行AwesomeProject.xcodeproj就可以了,下面这两句是在终端打开运行AwesomeProject.xcodeproj。

    cd AwesomeProject

    react-native run-ios

    2.安卓环境搭建

    ps:安卓环境我没有搭建过,有需要的同学可以看一下教程,跟着教程走搭建安卓开发环境。不过近期我应该会接触这一块,到时候我再修改一下!

    二、基础控件的使用

    1.对于rn文件的介绍

    我有篇博客说过这一段,实在不懂得可以看一下我的这篇博客

    2.基础控件的使用

    1>Text的使用

    首先需要引入Text模块,然后我们可以在View的背景下添加<Text>你需要写的文字</Text>,另外,在index.ios.js或者index.android.js文件中都有Text标签,我们也可以参考。这里我们主要介绍一下Text通用的常用属性。

    numberOfLines:1,字面意思就可以看出来是行数的意思,

    onPress ,我们也可以从字面猜到什么意思,这是当文本点击时调用的函数onpress={this._selector.bind(this)},实现_selector方法

    _selector(){

      //do something

    }

    这就实现了Text点击的效果。

    另外,Text常用的样式:

    <Text style={{color:'red', fontSize:20, fontWeight:300,textAlign:'center'}}>Text的常用属性</Text>,注意,直接写样式的话需要用{{}}括起来

    这里我没有用StyleSheet来写,简单概括,一个字,懒 T_T

    另外还有一些样式,lineHeight、fontFamily,backGroundColor等,这个可以自己测试一下,ps:textAlign对齐方式只是左右居中对齐,不是中心对齐,如果需要中心对齐,我们可以用View包住

    <View style={{justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',200,height:200}}>
            <Text style={styles.welcome}>
              DemonShow
            </Text>
    </View>
    

      其实这样我们也就做了一个简单的Button,

    另外还有有的同学不知道怎么获取屏幕的宽高,我们需要引入Dimensions

    let ScreenWidth = Dimensions.get('window').width;

    let Screenheight = Dimensions.get('window').height;

     

     ps:文字格式有的不太对,修改了一下

  • 相关阅读:
    Leetcode 16.25 LRU缓存 哈希表与双向链表的组合
    Leetcode437 路径总和 III 双递归与前缀和
    leetcode 0404 二叉树检查平衡性 DFS
    Leetcode 1219 黄金矿工 暴力回溯
    Leetcode1218 最长定差子序列 哈希表优化DP
    Leetcode 91 解码方法
    Leetcode 129 求根到叶子节点数字之和 DFS优化
    Leetcode 125 验证回文串 双指针
    Docker安装Mysql记录
    vmware虚拟机---Liunx配置静态IP
  • 原文地址:https://www.cnblogs.com/demon404/p/5780046.html
Copyright © 2011-2022 走看看