ReactNative组件

ReactNative组件

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

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

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

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

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

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

Platform

用来提供平台检测功能

1
2
3
4
5
6
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',
});

StyleSheet

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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)

1
2
3
4
5
6
7
8
9
10
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
...
</View>
);
}
}

Text

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

View

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

TextInput

文本框组件

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

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

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

allowFontScaling

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

类型 必填
bool No

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

autoFocus

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

类型 必填
bool No

defaultValue

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

类型 必填
string No

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

maxLength

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

类型 必填
number No

multiline

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

类型 必填
bool No

onChange

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

类型 必填
function No

onChangeText

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

类型 必填
function No

placeholder

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

类型 必填
string No

placeholderTextColor

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

类型 必填
color No

secureTextEntry

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

类型 必填
bool No

Image

图片组件

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

style

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

类型 必填
style

source

图片源数据(远程 URL 地址或本地数据)。

目前原生支持的图片格式有pngjpgjpegbmpgifwebp (仅 Android)、psd (仅 iOS)。

类型 必填
ImageSourcePropType

Button

按钮组件

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

onPress

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

类型 必填
function

title

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

类型 必填
string

accessibilityLabel

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

类型 必填
string

color

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

类型 必填
color

disabled

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

类型 必填
bool

testID

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

类型 必填
string

ActivityIndicator

加载中的 loading 效果小圆圈

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

animating

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

类型 必填
bool

color

滚轮的前景颜色(默认为灰色)。

类型 必填
color

size

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

类型 必填
enum(‘small’, ‘large’), number

ScrollView

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

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

horizontal

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

类型 必填
bool

滚轮的前景颜色(默认为灰色)

本文标题:ReactNative组件

文章作者:王工头

发布时间:2019年01月11日 - 02:43:21

最后更新:2019年01月25日 - 19:06:15

原始链接:https://qqqww.com/ReactNative组件/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------