十二指环的博客

HTMLCSS盒子模型练习JavaScriptjQueryReactNative环境初始ReactNativeReactNative组件ReactNative生命周期ListView&TabBarNavigator&原生通信综合练

React-Native入门指导之iOS篇 —— 一、准备工作React-Native 入门指导系列教程目录一、准备工作 (已完成)二、项目介绍与调试三、CSS样式与Flex布局四、常用UI控件的使用五、JSX在React-Native中的应用六、事件与数据调用七、自定义组件八、动手写实例九、发布与真机调试 写在前面1. 什么

HTML5+CSS3简介打开WebStorm创建一个html文件，首先我们先设置它的界面风格一般Mac系统的软件都是使用快捷键 commond+, 来设置界面...

参考文档ReactNative中文网1.安装Java环境 假如我们之前配置好过iOS环境的话，就直接从Android Studio开始配置。注意，Android配置会比iOS稍微麻烦一些。终端运行 javac -versionAndroid Studio需要Java Development Kit [JDK] 1.8（暂不支持更高版本）。看看你的JDK版本是否合适2.安...

RN中的View作为创建UI时最基础的组件，View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，View都会直接对应一个平台的原生视图，无论它是UIView、<div>还是android.view.View注意：App.js文件中的View组件相当于web中的body...

用Xcode打开RN创建的iOS项目 将RCTWebSocketExecutor文件中的localhost修改成本机的IP地址然后选择真机，进行编译，时间有点长。哪里报错改哪里。注意Test里面也要选择开发团队账户 真机调试步骤： 1、配置IP：找到RCTWebSocketExecutor.m里面的localhost改为你的电脑的IP地址 2、修改Bundle ID...

Text组件设置Text文字水平垂直居中显示export default class Test4 extends Component{ render(){ return( <View style={styles.container}> <Text style={styles.textStyle} nu...

Touchable组件import React, { Component } from 'react';import { Platform, StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native';export default class Test4 extends Com...

记住ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了...

ListView不分组Demo heros.json[ { "image": "1.jpg", "title": "有关斯维因的最早记载出现在诺克萨斯养老院一名医生的笔记上。据载，斯维因一瘸一拐地走进病房，没有叫喊也没有抱怨，他的右腿被折成两段，骨头破皮而出。他的肩膀上站着一只阴森的小鸟，仿佛是黏在他肩上似的...", "name": "策士统领·斯维因&q

很遗憾，TabBar iOS 仅仅支持iOS系统，安卓的需要我们使用第三方的插件，会在以后的文档中更新。以下的Demo主要是TabBar的切换，以后再实际项目中，我们会结合Navigator对其进行封装抽离。import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text,...

首先把需要用到的资源文件，放到Xcode项目中资源链接:https://pan.baidu.com/s/1hafWP4qbang9BCj0N_2yJw 密码:6rraTabBar和NavigationBar应用到iOS项目中，drawable-xxhdpi应用到安卓项目中。新建项目目录文件App.js文件import React, { Component } from '...

据说，react-natvigation是官方推荐使用的，搞不懂为啥官方放弃更新natigator了。所以在上篇文章的基础上使用react-natvigation。（1）StackNavigator：用来跳转页面和传递参数 （2）TabNavigator：类似底部导航栏，用来在同一屏幕下切换不同界面 （3）DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕 ...

总体感觉RN更新速度很快，一些老的教程都不合适新的版本。初学乍道，确实感觉很坑。废话不多说，我们直接跨过山越过海，直接撸个综合项目，进行RN的学习。据说FaceBook最近要对RN有重大版本的更新，不知道会更改到什么地步，希望会在模拟器的调试上变得更加方便一些。RN总体感觉比微信小程序墨迹多了，(ಥ_ಥ) 项目预览ReactNative版本react-native-cli: 2...

我们继续在上一篇文章的基础上编写我们的应用程序，视频列表页List我们先写垃圾代码，把整个的架子搭起来，然后如果有其他页面通用的组件的话，我们再进行封装处理ListView布局list.js文件import React, { Component } from 'react';import { Platform, StyleSheet, Text, ...

使用Mock假数据我这出现点问题，不能做网络请求加载数据，不能用就算了，我们不用它了，直接使用抓包工具抓到的接口封装网络请求拼接请求字符串 npm install query-string –save合并Json对象工具 npm i lodash –save新建公共文件夹common，并创建配置文件和封装网络请求文件config.js'use str...

在手机应用上，上拉加载更多的功能是必不可少的。同时，在实际使用的时候，当下拉加载，数据仍未返回时，用户多次重复进行下拉加载的操作，为了不产生额外的垃圾数据，我们需要进行判断。同时为了更好的用户体验，增加数据缓存功能。list.js文件/** * Sample React Native App * https://github.com/facebook/react-native * @...

接下来我们继续下拉刷新的功能，主要是缓存数据的拼接与后台服务器的配合。把数据最后的id传给后台，后台根据id返回给你新的id之后的数据，因为没有服务器，所以这里的代码仅仅做演示使用。下拉刷新RefreshControllist.jsimport React, {Component} from 'react';import { Platform, StyleShee...

点赞的状态其实是保存在服务器上面的，因为没有服务器，所以仅仅模拟这个功能因为点赞功能是在Item.js中的，所以在Item上面Item.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'rea...