ReactNative入门基础(1)

React Native学习 本文总阅读量次
  • React Native是facebook开源的用于开发移动端跨平台App的技术框架，其代码托管在GitHub上。
  • React Native中文文档

React Native 优点

  • 代码复用率高，可以使用ReactNative跑在 安卓/ios 上
  • 跨平台，可以用它开发安卓/ios
  • 具有本地能力，App占用体积小
  • 性能高，更新快
  • 可以发布，且支持动态更新（直接在用户设备上更新，不需要通过app store）
  • 开发成本低

运行命令

  • 新建项目 react-native init xxx
  • 运行项目 react-native run-android
  • 检验雷电模拟器连接 adb devices（连接成功会显示：daemon started successfully）
  • 热重载 进入app-“更多”-“摇一摇”打开开发者菜单-点击热重载Enable Hot Reloading（修改App.js，保存即可看见修改后的效果）
    【或者可以在终端输入adb shell input keyevent 82来打开开发者菜单】

页面布局

  • React Native是一个专注于UI构建的框架，
  • 设计的初衷是为了屏蔽平台的差异化显示。
  • 所以界面是React Native开发中的一个重要的组成部分。
  • flexbox布局可参考笔记CSS flexbox

注意

  • 默认情况下，flex的方向是column，即从上往下的。（这个与移动端与web页面不同，在web页面用CSS设置flex布局，默认的fiex-direction是row，即水平从左往右）。
  • 如果父容器的尺寸为零（即没有设置宽高，或者没有设定flex），即使子组件如果使用了flex，也是无法显示的。所以可以给父组件设置flex:1，表示让它占据了垂直的整个空间。

长度的单位

  • 首先需要知道，在写React Native组件样式时，长度的不带单位的，它表示“与设备像素密度无关的逻辑像素点”。
  • 在React Native中，拥有一个类似于dp的长度单位。

理解px

如果我们以像素为单位来设置一个界面元素的大小，比如说2px的高度，那么这2px的长度在不同的设备中就会是下面这个样子：
同样都是2px
可以发现：它们真实显示出的长度是不一样的。

理解dp

在同样物理尺寸大小的屏幕上（不论分辨率谁高谁低，只要物理尺寸大小一样即可），1个单位的长度所代表的物理尺寸是一样的。这种单位就应该是独立于分辨率的，把它起一个名字叫做 density-independent pixels，简称dp。这其实就是Android系统中所使用的长度单位。

例子：
2dp宽，2dp高的内容，在不同分辨率但屏幕尺寸一样的设备上所显示出的物理大小是一样的（一个题外话：有些Android开发者建议所有可点击的按钮，宽高都不应该少于48dp。）：
同样都是2dp

基础组件

组件的引用需要从'react-native'库进行引用,比如：

1
import { Alert, StyleSheet, View, Text, StatusBar, Image, ImageBackground, TextInput, TouchableOpacity, ToastAndroid, BackHandler, AsyncStorage } from 'react-native';

View 类似div

用于布局的最基础组件，是所有组件布局的基本、底层元素。**类似于<div>**。每一个View都可以当成是一个FlexBox
例子

Image 显示图片

React Native提供了多种方式加载图片，如加载网络图片、静态资源、本地图片、或读取用户相册中的图片。
例子

Text 显示文本

Text放在View中
例子
Text中嵌套Text，只有一行显示不下才会换行。应用于动态文本内容：
例子

TextInput 文本输入框

注意： rn 中的 onChangeText对应的是react 中的 onChange
例子

属性 含义
placehoder 提示文本
placehoderTextColor 提示文本颜色
defaultValue 默认值
editable 是否可以编辑。默认值为true，如果为false则文本框是不可编辑的
secureTextEntry 设置是否为密码组件。如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。multiline={true}时不可用
underlineColorAndroid 设置Android下的文本框下划线颜色(如果要去掉文本框的边框，请将此属性设为透明transparent)
clearTextOnFocus 组件获得焦点开始编辑时自动清空内容。如果为true，每次开始输入的时候都会清除文本框的内容
onChangeText 属性值是方法。当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。(rn 中的 onChangeText对应的是react 中的 onChange )
onSubmitEditing 属性值是方法。在文本被用户按下软键盘上的提交键后调用此回调函数，所传参数为{nativeEvent: {text, eventCount, target}}
方法 含义
clear() 清空输入框中内容

onChangeText的例子

假如我们要实现当用户输入时，实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球，只有一个单词： 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  state = {
    text: ''
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '').join(' ')}
        </Text>
      </View>
    );
  }
}

效果
如果你想要在用户输入的时候进行验证，需要学习 React中的受限组件 。

StyleSheet CSS样式

StyleSheet 提供了一种类似 CSS 样式表的抽象。

从代码质量角度：
从 render 函数中移除具体的样式内容，可以使代码更清晰易懂。
给样式命名也可以对 render 函数中的组件增加语义化的描述。

例子：
创建一个样式表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
});

使用一个样式表：

1
2
3
<View style={styles.container}>
  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>

触摸处理类组件（Touchable 系列组件）

  • 移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。
  • React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。

Button（交互控件）

  • Button 是一个简单的跨平台的按钮组件。
  • Button组件的样式是固定的，如果想要修改外观就需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮，视频教程讲述了完整的按钮制作过程。【当我们希望简单的拥有自己样式的按钮时可以使用 TouchableOpacity 包裹 Text 组件 来做一个自己的按钮。（利用触摸类事件的onPress属性）】
    1
    2
    3
    4
    5
    6
    7
    8
    <Button
      onPress={() => {
        Alert.alert("你点击了按钮！");
      }}
      title="点我！"
      color="#841584"
      accessibilityLabel="点击我了解更多信息"
    />
属性 含义
onPress 属性值是函数。用户点击此按钮时所调用的处理函数
title 按钮内显示的文本
accessibilityLabel 用于给残障人士显示的文本（比如读屏应用可能会读取这一内容）
disabled 设置为 true 时此按钮将不可点击

TouchableHighlight【按下变暗】

  • TouchableHighlight 组件的背景 会在用户手指按下时变暗。
  • 该组件可以包含View组件、Image、Text等等。但只能包裹一个层级的子元素。如果有很多组件需要包裹其中，那就需要使用 View组件 将其中所有的元素包裹起来，再放置在 TouchableHighlight组件 下。

例子

属性 | 含义
underlayColor | 有触摸操作时显示出来的底层的颜色
style | 属性值为样式，如style={styles.button}。包装被点击后显示的样式
onPress | 属性值为点击时执行的回调函数
onLongPress | 属性值为长按时执行的回调函数

TouchableNativeFeedback【Android平台】

TouchableNativeFeedback组件只能在Android平台下使用，提供了原生级别的组件渲染体验。它会在用户手指按下时形成类似墨水涟漪的视觉效果。
例子

TouchableOpacity【按下降低透明度】

  • TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
  • 当触摸点击的时候，被TouchableOpacity包裹的View会进行透明化处理，所以包裹的View可以不需要设置背景色。这样的组件样式可以使用在一些单纯的文字点击上，并提供一个简单的反馈效果。
  • 可参考文档

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { Component } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} from 'react-native'

export default class App extends Component {
 render() {
   return (
     <View style={styles.container}>
       <TouchableOpacity
         style={styles.button}
       >
         <Text> Touch Here </Text>
       </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  }
})

效果
效果

CSS样式

注意：在RN中，css样式表不要独立出来放在另一个文件中，应采用CSS in JS写法.(可以参考阮一峰的博客)

内联样式

内联样式

外部样式

同一个js文件中：
外部样式

React Native学习