首先解釋下AppRegistry
是JS運行所有React Native應用的入口 什么是入口?
1.在我們初始化一個react native項目的時候 默認的index.ios.js/index.ios.js里面的內容是這這樣的
(這里我們簡化一下代碼)
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class Allen extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); AppRegistry.registerComponent('Allen', () => Allen);
這段代碼中系統自動創建了一個組件叫做Allen 然后這個組件會被Appregistry 這個API的注冊函數顯示出來。
帶雙引號的這個“Allen”代表的是這個APP的名稱 后面的Allen代表的是所要顯示的組件名稱, 那么我們就可以在創建一個xxx.js文件 (在react-native中一個文件也是一個組件) 那么我們就可以將這個組件注冊到這里來 則可以顯示這個js所呈現的內容
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import NextPage from './NextPage' AppRegistry.registerComponent('Allen', () => NextPage ); //注冊組件
import React, { Component } from 'react';//導入react的組建 import {//需要的組建導入 AppRegistry, StyleSheet, Text, View, Navigator, TouchableHighlight } from 'react-native'; export default class HelloPage extends Component { //注意:注冊的組件只是注冊一次 和組件名稱無關 和文件組件名稱有關 constructor(props) { super(props) } render(){ const {navigator} = this.props; return( <View style={{padding:50,borderWidth:1,}}> <Text style={{fontSize:50,}}>sds'd'f'd'sds</Text> </View> ) } }