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