react-native(리액트 네이티브) component - Text

react-native(리액트 네이티브) component - Text

//Text

import React, { Component } from 'react';

import { AppRegistry, Text, View, StyleSheet } from 'react-native';

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 (

<View>

<Text>*** Normal Text & Use varibles ***</Text>

<Text style={styles.baseText}>

<Text style={styles.titleText} onPress={this.onPressTitle}>

{this.state.titleText}{'\n'}{'\n'}{'\n'}

</Text>

<Text numberOfLines={5}>

{this.state.bodyText}

</Text>

</Text>

<Text>{'\n'}{'\n'}{'\n'}*** Nested Text ***</Text>

<Text style={{fontWeight: 'bold'}}>

I am bold

<Text style={{color: 'red'}}>

and red

</Text>

</Text>

<Text>{'\n'}{'\n'}{'\n'}*** style이 적용된 Text component ***</Text>

<View>

<MyAppHeaderText>Text styled as a header</MyAppHeaderText>

</View>

</View>

);

}

}

class MyAppHeaderText extends Component {

render() {

return (

<Text style={{fontSize: 20}}>{this.props.children}</Text>

);

}

}

const styles = StyleSheet.create({

baseText: {

fontFamily: 'Cochin',

},

titleText: {

fontSize: 20,

fontWeight: 'bold',

},

});

// skip this line if using Create React Native App

AppRegistry.registerComponent('TextInANest', () => TextInANest);