首先解釋下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>
)
}
}
