组件

View:

View组件是React Native最基本的组件,绝大部分其他组件都继承了View组件的属性,包括支持View组件的样式设置、回调函数及其他属性。

Image组件:

React Native默认支持JPG与PNG格式。React Native在ios平台还支持GIF格式与WebP格式,但android平台默认不支持这两种格式。在android/app/build.gradle文件中,添加以下第三方库设置android平台支持这两种格式:

//需要GIF动画支持请添加本行语句;
implementation 'com.facebook.fresco:animated-gif:2.0.0'
//需要WebP格式支持请添加本行语句;
implementation 'com.facebook.fresco:webpsupport:2.0.0'
//需要WebP动画支持请添加本行语句;
implementation 'com.facebook.fresco:animated-webp:2.0.0'

可触摸组件类型:

  可触摸组件有TouchableNativeFeedback、TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity四种。
  TouchableNativeFeedback是android操作系统的专用组件。
  TouchableWithoutFeedback组件在用户触摸时,没有反馈任何视觉效果。
  TouchableOpacity与TouchableHighlight两个组件在用户触摸时都反馈了视觉效果,优先使用TouchableOpacity组件。
可触摸组件只能有一个子组件。如果需要将多个组件设置为可触摸效果,则需要将它们放在一个View中,然后让这个View成为可触摸组件的子组件。
  当一个组件成为TouchableOpacity组件的子组件后,这个组件被触摸时会变成半透明的组件。

<TouchableOpacity onPress={this.onPressButton} activeOpacity={0.5} >
    <View style={styles.button} />
</TouchableOpacity>

activeOpacity定义了透明度的值,取值为从0到1,0表示完全透明,1表示一点也不透明。它的默认值是0.2.
  当一个组件成为TouchableHightlight组件的子组件后,这个组件被触摸时会产生一种变暗的效果。

Text组件:

Text内部的元素不再使用flexbox布局,而是采用文本布局。不要将Text组件视为一个支持flexbox样式的盒子模型,不要按照盒子模型对其设置flexbox键值。想要通过flexbox设置让它居中显示是不可能的。常见的做法是,使用一个组件作为Text组件的容器,然后对这个组件设置flexbox样式,从而达到我们希望的效果。

样式:

  • fontFamily:指定Text组件以何种字体显示。取值有:sans-serif、serif、monospace、sans-serif-light、sans-serif-thin、sans-serif-condensed、sans-serif-medium。
  • fontStyle:指定字体的风格。取值有:normal、italic,分别代表正常的字体和斜体字体。
  • fontSize:指定Text组件显示文字的大小。
  • fontWeight:指定Text组件的文字的粗细。取值有:normal、bold、100、200、300、400、500、600、700、800、900.normal表示正常字体,bold表示粗体。其后的数字序列代表从最细100到最粗900的字体粗细程度。
  • textAlign:指定字符串排列顺序。取值有:auto、left、right、center、justify。justify值只在ios平台有效,在android平台等价于left。
  • textDecorationLine:取值有:none、underline、line-through、underline line-through,分别对应没有装饰线、下划线装饰、装饰线贯穿装饰、下划线贯穿装饰。
  • lineHeight:指定每一行的高度。
  • textShadowOffse:要实现阴影效果,需要设定三个样式键:textShadowOffse、textShadowRadius、textShadowColor;
  • textShadowRadius
  • textShadowColor
  • ellipsizeMode:指定当Text组件无法全部显示需要显示的字符串时如何用省略号进行修饰。取值有:head、middle、tail、clip。默认值是clip。ellipsizeMode属性需要与numberOfLine属性配合使用。
  • numberOfLines:指定Text组件中的字符串可以显示为多少行。如果不设置,那么将按照字符串的长度显示,无行数限制直到显示完为止。当有限制时,按ellipsizeMode属性来决定如何显示。
  • onPress:是回调函数类型的属性,当字符串组件被按下时,相应的回调函数将被执行。
  • onLongPress:是回调函数类型的属性,当字符串组件被长按时,相应的回调函数将被执行。
  • Selectable:取值为:true、false,默认值是false,当为true时,表示字符串组件中的文字可以被选择并被复制到手机系统的剪贴板中。

Text组件的嵌套:

  在嵌套的Text组件中,子Text组件将继承它的父Text组件的样式。当使用嵌套的Text组件时,子Text组件不能覆盖从父Text组件继承而来的样式,只能增加父Text组件没有指定的样式。如果试图在代码中覆盖从父Text组件继承而来的样式,覆盖将不会生效,并且在开发模式下会弹出警告。