ReactNative一些组件和属性

2019-01-29 本文已影响0人这里王工头

欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

更好的体验请访问https://blog.csdn.net/weixin_43307658/article/details/86650778

该文档要配合项目文档地址ReactNative豆瓣电影看会更好

这里只写我在进行ReactNative豆瓣电影项目的时候去ReactNative官网研究过的组件

Platform: 用来提供平台检测功能的
StyleSheet: 样式相关的组件，专门用来创建样式的
Text: 文本节点，所有文本必须放到这个里面
View: 用来布局的，相当于 div
TextInput: 文本框组件
Image: 图片组件
Button: 按钮组件
ActivityIndicator: 加载中的 loading 效果小圆圈
ScrollView: 滚动组件（默认，如果一个RN的页面非常长，超出了屏幕高度，这时候，不会像网页中那样自动提供滚动条，如果需要让页面实现滚动的话，需要使用 ScrollView 把页面包裹起来）

基本都是导入组件，然后在首页中用render()渲染就可以了，真是超级无敌爆炸爽

// 导入 React 基础包，这个包，作用是创建 组件
import React, { Component } from 'react'
// 从 react-native 中导入系统开发需要的包
import {Platform, StyleSheet, Text, View ...} from 'react-native'

1 Platform

用来提供平台检测功能

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

2 StyleSheet

使用 StyleSheet.create 创建样式表对象，可以为 create 传递一个配置对象，这个对象就是要创建的样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center', // 一些文本类型的样式值，需要引号包裹起来
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

载入样式(和对象的操作一样，例如style.welcome)

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        ...
      </View>
    );
  }
}

3 Text

文本节点，所有文本必须放到这个里面，在项目文档地址上面首页中有讲到

4 View

用来布局的，相当于页面元素div，在项目文档地址上面首页中有讲到

5 TextInput

文本框组件

这里刚开始输入框会特别窄，所以需要修改样式

在styles对象中添加一个一个键值对inputStyle: { width: '100%' }

TextInput有很多属性选项，这里使用的几个练手,具体参考ReactNative官方文档

5.1 allowFontScaling

控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。

类型	必填
bool	No

5.2 autoCapitalize

控制TextInput是否要自动将特定字符切换为大写，This property is not supported by some keyboard types such as name-phone-pad.

characters: 所有的字符。
words: 每个单词的第一个字符。
sentences: 每句话的第一个字符（默认）。
none: 不切换。

类型	必填
enum('none', 'sentences', 'words', 'characters')	No

5.3 autoFocus

如果为true，在componentDidMount后会获得焦点。默认值为false。

类型	必填
bool	No

5.4 defaultValue

提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变。在一些简单的使用情形下，如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候，就可以用defaultValue来代替。

类型	必填
string	No

5.5 keyboardType

决定弹出的何种软键盘的，譬如numeric（纯数字键盘）。

这些值在所有平台都可用：

default
number-pad
decimal-pad
numeric
email-address
phone-pad

下面的值仅iOS可用：

ascii-capable
numbers-and-punctuation
url
name-phone-pad
twitter
web-search

下面的值仅Android可用：

visible-password

类型	必填
enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password')	No

5.6 maxLength

限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。

类型	必填
number	No

5.7 multiline

如果为true，文本框中可以输入多行文字。默认值为false。注意安卓上如果设置multiline = {true}，文本默认会垂直居中，可设置textAlignVertical: 'top'样式来使其居顶显示。

类型	必填
bool	No

5.8 onChange

当文本框内容变化时调用此回调函数。回调参数为{ nativeEvent: { eventCount, target, text} }。

类型	必填
function	No

5.9 onChangeText

当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。

类型	必填
function	No

5.10 placeholder

如果没有任何文字输入，会显示此字符串。

类型	必填
string	No

5.11 placeholderTextColor

占位字符串显示的文字颜色。

类型	必填
color	No

5.12 secureTextEntry

如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。multiline={true}时不可用。

类型	必填
bool	No

6 Image

图片组件

Image的属性选项，这里使用的几个练手,具体参考ReactNative官方文档

6.1 style

这里可以自定义样式，或者使用枚举

类型	必填
style	否

6.2 source

图片源数据（远程 URL 地址或本地数据）。

目前原生支持的图片格式有png、jpg、jpeg、bmp、gif、webp (仅 Android)、psd (仅 iOS)。

类型	必填
ImageSourcePropType	否

7 Button

按钮组件

Button的属性选项，这里使用的几个练手,具体参考ReactNative官方文档

7.1 onPress

用户点击此按钮时所调用的处理函数, 必须的

类型	必填
function	是

7.2 title

按钮内显示的文本，必须的

类型	必填
string	是

7.3 accessibilityLabel

用于给残障人士显示的文本（比如读屏应用可能会读取这一内容）

类型	必填
string	否

7.4 color

文本的颜色(iOS)，或是按钮的背景色(Android)

类型	必填
color	否

7.5 disabled

设置为 true 时此按钮将不可点击。

类型	必填
bool	否

7.6 testID

用来在端到端测试中定位此视图。

类型	必填
string	否

8 ActivityIndicator

加载中的 loading 效果小圆圈

ActivityIndicator的属性选项，这里使用的几个练手,具体参考ReactNative官方文档

8.1 animating

是否要显示指示器动画，默认为 true 表示显示，false 则隐藏。

类型	必填
bool	否

8.2 color

滚轮的前景颜色（默认为灰色）。

类型	必填
color	否

8.3 size

指示器的大小，默认为'small'。目前只能在 Android 上设定具体的数值。

类型	必填
enum('small', 'large'), number	否

9 ScrollView

滚动组件（默认，如果一个RN的页面非常长，超出了屏幕高度，这时候，不会像网页中那样自动提供滚动条，如果需要让页面实现滚动的话，需要使用 ScrollView 把页面包裹起来）

ScrollView的属性选项，这里使用的几个练手,具体参考ReactNative官方文档

9.1 horizontal

当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。

类型	必填
bool	否

滚轮的前景颜色（默认为灰色）