我们初始化一个项目，打开index.ios.js,可以看到一下内容
009F9480-34C7-44EB-9BB6-E3762B570DB5.png
大致分为4大模块
- 1、组件导入区
- 2、核心代码区
- 3、组件样式区
- 4、注册启动组件
React-Native的基本控件属性方法
View
| 名称 |
类型 |
说明 |
| accessibilityLabel |
string类型，属性 |
|
| accessible |
bool类型，属性 |
当为true时，表示该元素是可以进行访问，默认情况下所有可触摸的元素控件都是可以访问的 |
| onAccessibilityTap |
方法 |
该当accessible为true的时候并且用户对控件View做了一个Tap(轻轻的触摸或者点击)的手势 |
| onLayout |
方法 |
当组件的布局发生变动的时候，会自动调用下面的方法 :{nativeEvent: { layout: {x, y, width, height}}}。该事件当重新计算布局的时候会立即进行触发，不过界面可能不会立即刷新，特别当布局动画正在加载中的时候。 |
| onMagicTap |
方法 |
当accessible为true的时候，当用户双指点击(Magic Tap)的时候，进行触发 |
Text
| 名称 |
类型 |
说明 |
| allowFontScaling |
bool |
控制字体是否根据iOS的设置进行自动缩放-iOS平台,Android平台不适用 |
| numberOfLines |
number |
进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了 |
| onLayout |
function |
当布局位置发生变动的时候自动进行触发该方法, |
| onPress |
function |
该方法当文本发生点击的时候调用该方法. |
| color |
属性 |
字体颜色 |
| fontFamily |
属性 |
字体名称 |
| fontSize |
属性 |
字体大小 |
| fontStyle |
属性 |
字体风格(normal,italic) |
| fontWeight |
属性 |
字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') |
| textShadowOffset |
属性 |
设置阴影效果{width: number, height: number} |
| textShadowRadius |
属性 |
阴影效果圆角 |
| textShadowColor |
属性 |
阴影效果的颜色 |
| letterSpacing |
属性 |
字符间距 |
| lineHeight |
属性 |
行高 |
| textAlign |
属性 |
文本对其方式("auto", 'left', 'right', 'center', 'justify') |
| textDecorationLine |
属性 |
横线位置 ("none", 'underline', 'line-through', 'underline line-through') |
| textDecorationStyle |
属性 |
线的风格("solid", 'double', 'dotted', 'dashed') |
| textDecorationColor |
属性 |
线的颜色 |
| writingDirection |
属性 |
文本方向("auto", 'ltr', 'rtl') |
Image
| 名称 |
类型 |
说明 |
| onLayout |
function |
当Image布局发生改变的，会进行调用该方法，调用的代码为:{nativeEvent: {layout: {x, y, width, height}}} |
| onLoad |
function |
当图片加载成功之后，回调该方法 |
| onLoadEnd |
function |
图片加载结束的时候，回调的方法 |
| onLoadStart |
fcuntion |
当图片开始加载的时候调用该方法 |
| resizeMode |
|
缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片 |
| source |
|
{uri:string} 进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径 |
| FlexBox |
|
支持弹性盒子风格 |
| Transforms |
|
支持属性动画 |
| resizeMode |
|
设置缩放模式 |
| backgroundColor |
|
背景颜色 |
| borderColor |
|
边框颜色 |
| borderWidth |
|
边框宽度 |
| borderRadius |
|
边框圆角 |
| overflow |
|
设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden') |
| tintColor |
|
颜色设置 |
| opacity |
|
设置不透明度0.0(透明)-1.0(完全不透明) |
TextInput
| 名称 |
说明 |
| autoCapitalize |
控制TextInput输入的字符进行切换成大写(可选择参数:'none', 'sentences', 'words', 'characters');none:不自动切换任何字符成大写;sentences:默认每个句子的首字母变成大写;words:每个单词的首字母变成大写;characters:每个字母全部变成大写 |
| autoCorrect |
设置拼写自动修正功能 默认为开启(true) |
| autoFocus |
设置是否默认获取到焦点默认为关闭(false)。该需要componentDidMount方法被调用之后才会获取焦点哦(componentDidMount是React组件被渲染之后React主动回调的方法) |
| defaultValue |
string 给文本输入设置一个默认初始值 |
| editable |
bool 设置文本框是否可以编辑 默认值为true,可以进行编辑 |
| keyboardType |
键盘类型(可选参数:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 该用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘 |
| maxLength |
number 可以限制文本输入框最大的输入字符长度 |
| multiline |
bool 设置可以输入多行文字，默认为false(表示无论文本输入多少，都是单行显示) |
| onBlur |
function 监听方法，文本框失去焦点回调方法 |
| onChange |
function 监听方法,文本框内容发生改变回调方法 |
| onChangeText |
function监听方法，文本框内容发生改变回调方法，该方法会进行传递文本内容 |
| onEndEditing |
function监听方法，当文本结束文本输入回调方法 |
| onFocus |
function 监听方法 文本框获取到焦点回调方法 |
| onLayout |
function监听方法 组价布局发生变化的时候调用，调用方法参数为 {x,y,width,height} |
| onSubmitEditing |
function监听方法，当编辑提交的时候回调方法。不过如果multiline={true}的时候，该属性就不生效 |
| placeholder |
string 当文本输入框还没有任何输入的时候，默认显示信息，当有输入的时候该值会被清除 |
| placeholderText |
Color string 设置默认信息颜色(placeholder) |
| secureTextEntry |
bool 设置是否为密码安全输入框 ，默认为false |
| style |
风格属性 可以参考Text组件风格 |
| underlineColorAndroid |
设置文本输入框下划线的颜色 |
ScrollView
| 名称 |
说明 |
| contentContainerStyle |
样式风格属性(传入StyleSheet创建的Style文件)。该样式会作用于被ScrollView包裹的所有的子视图 |
| horizontal |
表示ScrollView是横向滑动还是纵向滑动。该默认为false表示纵向滑动 |
| keyboardDismissMode |
枚举类型表示键盘隐藏类型，可选值('none', "interactive", 'on-drag') 三个值的意义分别如下:none 默认值，表示在进行拖拽滑动的时候不隐藏键盘;on-drag 表示在进行拖拽滑动开始的时候隐藏键盘; interactive 表示当拖拽触摸移动的同时隐藏键盘，向上拖拽的时候取消隐藏。不过在Android平台上面该选项不支持，所以会和'none'一样的效果 |
| onContentSizeChange |
function 该当滚动视图的内容尺寸大小发生变化的时候进行调用 |
| onScroll |
function 该方法在滚动的时候每frame(帧)调用一次。该方法事件调用的频率可以使用scrollEventThrottle属性进行设置。 |
| refreshControl |
element 设置元素控件，该可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能 |
| showsHorizontalScrollIndicator |
该值设置是否需要显示横向滚动指示条 |
| showsVerticalScrollIndicator |
该值设置是否需要显示纵向滚动指示条 |
Switch
| 名称 |
说明 |
| disabled |
bool 如果该值为true,用户就无法点击switch开关控件，默认为false |
| onValueChange |
function 方法，当该组件的状态值发生变化的时候回调方法 |
| value |
bool 该开关的值，如果该值为true的时候，开关呈打开状态，默认为false |
Picker
| 名称 |
说明 |
| onValueChange |
function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数。itemValue:该属性值为被选中的item的属性值；itemPosition:该选择器被选中的item的索引position |
| selectedValue |
any任何参数值，选择器选中的item所对应的值，该可以是一个字符串或者一个数字 |
| style |
pickerStyleType 该传入style样式，设置picker的样式风格 |
| mode |
enum ('dialog','dropdown') 选择器模式。在Android平台上面，设置mode可以控制用户点击picker弹出的样式风格。'dialog': 该值为默认值，进行弹出一个模态dialog(弹出框)；dropdown':以picker视图为基础，在该视图下面弹出下拉框 |
| prompt |
string 设置picker的提示语(标题),在Android平台上面，模式设置成'dialog',显示弹出框的标题 |
