React Native Knowledge 2-text component

Text is used to display the react component of the text, and it also supports nesting, styling, and touch processing. In the following example, nested headings and body text inherit the fontfamily font style from Styles.basetext, but the caption also attaches its own extra style. Headings and text are stacked on top of each other and separated by line breaks embedded in the code.

One: Properties

1: allowfontscaling bool(iOS- specific): Controls whether the font is scaled based on the iOS text size accessibility option.

2:numberoflines number: To crop text when the text is too long. The total number of lines will not exceed the limit of this attribute, including the resulting line breaks;

3:onlayout function: Called after mount or layout change, the parameter is as follows: {nativeevent: {layout: {x, y, width, height}}}

4: onpress function: Call this callback function when the text is clicked

5:testid string: Used to mark this view in an end-to-end test.

6:suppresshighlighting bool (iOS-specific): when true, there is no visual effect if the text is pressed. By default, text is pressed with a gray, oval-shaped highlight

Two: Styles style

1:color string

2:fontfamily string

3:fontsize number

4:fontstyle enum (' normal ', ' italic ')

5:fontweight enum ("normal", ' bold ', ' 100 ', ' 200 ', ' 300 ', ' 400 ', ' 500 ', ' 600 ', ' 700 ', ' 800 ', ' 900 ')

Specifies the weight of the font. Most fonts support the ' normal ' and ' bold ' values. Not all fonts support all numeric values. If a value is not supported, the closest value is automatically selected.

6:letterspacing Number Character Spacing

7:lineheight number Row High

8:textalign enum ("Auto", ' left ', ' right ', ' center ', ' justify ')

Specifies how the text is aligned. Where the ' justify ' value is only supported by iOS.

9: (Android) textalignvertical enum (' Auto ', ' top ', ' Bottom ', ' center ')

Textdecorationcolor: (iOS) color of string line

11:textdecorationline enum ("None", ' Underline ', ' line-through ', ' underline line-through ') Horizontal position

: (iOS) Textdecorationstyle enum ("Solid", ' double ', ' dotted ', ' dashed ') line style

: (iOS) writingdirection enum ("Auto", ' ltr ', ' RTL ') text direction

Three: Instance code:

The application of 1:text attribute

import React, {Component} from ‘react’;
import {
  AppRegistry,
  StyleSheet,
  AlertIOS,
  Text,
  View
} from ‘react-native’;

class ReactNativeProject extends Component {

  render () {
    return (
      <View style = {styles.container}>
        <Text style = {styles.textTopStyle}>
            I started learning react native content, this example is about how to use the use of Text, including related properties and events;
        </ Text>

         <Text style = {styles.textCenterStyle} numberOfLines = {2}>
            numberOfLines: The value of this attribute is a number, used to specify the maximum number of lines displayed, if it exceeds this value, it will be represented by an ellipsis (...), similar to the original effect
         </ Text>

         <Text style = {styles.textBottomStyle} onPress = {() => AlertIOS.prompt (‘Secure Text’, null, null, ‘secure-text’)}>
            Use of click events
         </ Text>

         <Text style = {{fontWeight: ‘bold‘, marginTop: 40}}>
              I am about
              <Text style = {{color: ‘red‘}}>
              Nested text
              </ Text>
              The use of
        </ Text>

      </ View>
    );
  }
}

const styles = StyleSheet.create ({
  container: {
    flex: 1,
    height: 300,
    justifyContent: ‘center’
  },
  textTopStyle:
  {
    fontSize: 20,
    fontWeight: ‘bold’,
    textAlign: ‘center’,
    color: ‘red’
  },
  textCenterStyle:
  {
    fontSize: 14,
    textAlign: ‘center’,
    color: ‘blue’
  },
  textBottomStyle:
  {
    fontSize: 17,
    textAlign: ‘right’,
    color: ‘red’,
    marginTop: 50,
    marginRight: 20,
    borderWidth: 1,
    borderColor: ‘red’
  }
});

AppRegistry.registerComponent (‘ReactNativeProject’, () => ReactNativeProject); 

：

2: Common text styles

 
<Text style={{textDecorationLine: ‘underline‘, textDecorationStyle: ‘solid‘}}>
Solid underline
</Text>
<Text style={{textDecorationLine: ‘underline‘, textDecorationStyle: ‘double‘, textDecorationColor: ‘#ff0000‘}}>
Double underline with custom color
</Text>
<Text style={{textDecorationLine: ‘underline‘, textDecorationStyle: ‘dashed‘, textDecorationColor: ‘#9CDC40‘}}>
Dashed underline with custom color
</Text>
<Text style={{textDecorationLine: ‘underline‘, textDecorationStyle: ‘dotted‘, textDecorationColor: ‘blue‘}}>
Dotted underline with custom color
</Text>
<Text style={{textDecorationLine: ‘none‘}}>
None textDecoration
</Text>
<Text style={{textDecorationLine: ‘line-through‘, textDecorationStyle: ‘solid‘}}>
Solid line-through
</Text>
<Text style={{textDecorationLine: ‘line-through‘, textDecorationStyle: ‘double‘, textDecorationColor: ‘#ff0000‘}}>
Double line-through with custom color
</Text>
<Text style={{textDecorationLine: ‘line-through‘, textDecorationStyle: ‘dashed‘, textDecorationColor: ‘#9CDC40‘}}>
Dashed line-through with custom color
</Text>
<Text style={{textDecorationLine: ‘line-through‘, textDecorationStyle: ‘dotted‘, textDecorationColor: ‘blue‘}}>
Dotted line-through with custom color
</Text>
<Text style={{textDecorationLine: ‘underline line-through‘}}>
Both underline and line-through
</Text>

：

Four: Knowledge points

1:text can be used when the container,<text> element is different from other components on the layout: The elements inside the text no longer use the Flexbox layout, but rather the text layout. This means that elements inside <Text> are no longer rectangles, and may be collapsed at the end of the line.

2:<view> can not directly put a text, but in <View></View> contains a <text></text> Then put the text content in the TEXTJ inside;

React Native Knowledge 2-text component