Preface

Text component is a basic component in React. It is similar to TextView component on Android. It is used to display text. Besides basic display layout, this control can be nested, styled, and event handling functions can be added.

Basic Usage

Attribute method

Here I just give some more commonly used attribute methods, just to play a role in attracting valuable ideas. If you want to learn more, you can check the official website.

Style style - style label

Text component can use all styles of View component, and all styles of View component can View official documents

actual combat

Basic attribute exercise

Code

export default class TextInANest extends Component {constructor(props) 
{
    super(props);
    this.state = 
    {
          titleText: "Bird's Nest",
          bodyText: 'This is not really a bird nest.'
    };
}
render() 
{
    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>
        );
}
}

const styles = StyleSheet.create(
{
    baseText: {
    fontFamily: 'Cochin',
},
titleText: 
{
    fontSize: 20,
    fontWeight: 'bold',
},
});

Effect

Nesting exercise

Code

export default class BoldAndBeautiful extends Component 
{
    render() 
    {
        return (
          <Text style={{fontWeight: 'bold'}}>
            I am bold
            <Text style={{color: 'red'}}>
              and red
            </Text>
          </Text>
    );
    }
}

Design sketch

Combination exercises

Code

<View>
    <MyAppText>
        Text styled with the default font for the entire application
    </MyAppText>
    <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

Design sketch

Other

Reference: RN_Text