React组件化开发

在线模拟器：方便学习语法，需要在翻墙状态下打开。

https://dabbott.github.io/react-native-web-player/

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

//组件可以是
class class GoodMorning extends Component{ 
    render(){ 
       return( <Text>Good morning!</Text> ); 
    } 
} 

//组件可以是
function const GoodEvening = ()=>{ 
    return( <Text>Good evening!</Text> ); 
 }

class App extends Component {
    //render渲染的意思
    render() { 
      return ( 
       <View style={styles.container}> 
         <GoodMorning/> 
         <GoodEvening/> 
         <Text style={styles.welcome}> Welcome to React Native! </Text> 
       </View> ) 
    } 
}

const styles = StyleSheet.create({ 
     container: { 
         flex: 1, 
         justifyContent: 'center', 
         alignItems: 'center', 
         backgroundColor: '#F5FCFF', }, 
         welcome: { fontSize: 20, textAlign: 'center', margin: 10, 
       }, 
     })

AppRegistry.registerComponent('App', () => App)

 

转载于:https://my.oschina.net/u/4042953/blog/2994767