《React-Native系列》10、 RN组件之Text和TextInput以及注意要点

最新推荐文章于 2024-04-07 14:25:56 发布

coder_小刀

最新推荐文章于 2024-04-07 14:25:56 发布

阅读量1.6w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： ReactNative ReactNative实战系列文章标签： ReactNative

本文链接：https://blog.youkuaiyun.com/codetomylaw/article/details/52187145

今天把写的RN程序从iOS上迁移到Android上，发现了一些问题，主要涉及到Text和TextInput这两个组件，所以用一节来专门记录下来。

Text组件

我们先来看官网给的例子：

renderText: function() {
  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={this.onPressTitle}>
        {this.state.titleText + '\n\n'}
      </Text>
      <Text numberOfLines={5}>
        {this.state.bodyText}
      </Text>
    </Text>
  );
},
...
var styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
};

属性

ios allowFontScaling bool
控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放。

numberOfLines number
用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。

onLayout function
当挂载或者布局变化以后调用，参数为如下的内容：{nativeEvent: {layout: {x, y, width, height}}}

onPress function
当文本被点击以后调用此回调函数。

样式

color string

fontFamily string

fontSize number

fontStyle enum('normal', 'italic')

fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值。

letterSpacing number

lineHeight number

textAlign enum("auto", 'left', 'right', 'center', 'justify')
指定文本的对齐方式。其中'justify'值仅iOS支持。

androidtextAlignVertical enum