React Native
黄权浩
喜欢各种新技术,欢迎一起讨论。
展开
-
React Native学习(7)处理文本输入
React Native学习(7)处理文本输入TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性,会在文本被提交后(用户按下软键盘上的提交键)调用。如:/** * 慢慢学习 * https://blog.csdn.net/quanhaoH ...原创 2019-05-24 14:10:28 · 239 阅读 · 0 评论 -
React Native学习(6)Flexbox布局
Flexbox布局flexDirectionJustify ContentAlign Items在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。flexDirection在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(...原创 2019-05-22 15:28:04 · 170 阅读 · 0 评论 -
React Native学习(5)组件的高度与宽度
React Native学习(5)组件的高度与宽度指定宽高就是直接赋予组件width和height,React Native 中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。/** * 慢慢学习 * https://blog.csdn.net/quanhaoH */import React, { Component } from 'react';import { ...原创 2019-05-22 14:39:23 · 917 阅读 · 0 评论 -
React Native学习(4)样式
React Native学习(4)样式在React Native中的样式仍然是使用 JavaScript 来写。如:/** * 慢慢学习 * https://blog.csdn.net/quanhaoH */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text,...原创 2019-05-22 14:15:37 · 151 阅读 · 0 评论 -
React Native学习(3)State(状态)
React Native学习(3)State(状态)我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state。如下:import React, { Component } from 'react';import { AppRegistry, StyleShee...原创 2019-05-22 14:02:10 · 216 阅读 · 0 评论 -
React Native学习(2)Props(属性)
Props(属性)大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为 props(属性)。/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { ...原创 2019-05-21 14:32:38 · 151 阅读 · 0 评论 -
React Native Mac下环境搭建
React Native Mac下环境搭建安装依赖Node, WatchmanYarn、React Native 的命令行工具(react-native-cli)创建新项目编译并运行 React Native 应用在项目目录中运行react-native run-ios也可以直接打开Xcode运行运行结果安装依赖必须安装的依赖有:Node、Watchman 和 React Native 命令行...原创 2019-05-21 10:50:33 · 246 阅读 · 0 评论 -
React Native学习(10)长列表
React Native学习(10)长列表FlatListSectionListFlatListFlatList更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,FlatList并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。FlatList组件必须的两个属性是data和renderItem。data是列表的数据源,而renderItem则从数据源中逐个解析数据。如...原创 2019-05-24 16:37:00 · 181 阅读 · 0 评论 -
React Native学习(9)使用滚动视图
React Native学习(9)使用滚动视图ScrollView是一个通用的可滚动的容器,不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。如:/** * 慢慢学习 * https://blog.csdn.net/quanhaoH */import React, { Component } from 'react';import { AppRegistry,...原创 2019-05-24 15:30:39 · 253 阅读 · 0 评论 -
React Native学习(8)处理触摸事件
React Native学习(8)处理触摸事件触摸时间一般为按钮、滑动、缩放等等。先来创建一个最简单的按钮:/** * 慢慢学习 * https://blog.csdn.net/quanhaoH */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Text...原创 2019-05-24 14:55:49 · 198 阅读 · 0 评论 -
React Native学习(1)第一个Hello World应用
安装依赖必须安装的依赖有:Node、Watchman 和 React Native 命令行工具以及 Xcode。Node, Watchman在命令行中执行下列命令安装:brew install nodebrew install watchmanconfig set registry https://registry.npm.taobao.org --globalconfig set...原创 2019-05-17 14:07:55 · 155 阅读 · 0 评论