react native学习笔记2——Hello World和组件构成简介
相信配置好rn环境的朋友,在初始化好第一个项目AwesomeProject后会忍不住尝试动手改一改、试一试。下面还是遵循古老传统从hello world开始表演,可以在最初搭建好环境时新建的第一个项目AwesomeProject的基础上,用下面的代码覆盖你的 Hello Worldimport React,{ Component } from 'react';
import { AppRegistry,Text,StyleSheet } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text style={styles.hello}>Hello world!</Text> ); } } const styles = StyleSheet.create({ hello: { fontSize: 20,margin: 10,} }); // 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致 AppRegistry.registerComponent('AwesomeProject',() => HelloWorldApp);
大体结构上面的代码段大致可以分为四个部分: 1.组件导入: 所有用到的组件都需要事先进行导入,包括样式也需要进行导入 import React,StyleSheet } from 'react-native';
2.核心代码:所有逻辑代码编写的地方 class HelloWorldApp extends Component {
render() {
return (
<Text style={styles.hello}>Hello world!</Text> ); } }
3.组件样式:render()方法中用到的组件的样式,可以集中在这里编写 const styles = StyleSheet.create({
hello: {
fontSize: 20,margin: 10,}
});
4.注册启动组件:组件只有注册后才能运行。这里用到的AppRegistry也需要在组件导入区进行导入.
AppRegistry.registerComponent('AwesomeProject',() => HelloWorldApp);
组件——Component上面多次提到一个重要的名词——组件(Component),在React Native项目中每个界面都是由一个个小组件组成的大组件。在Hello World实例代码中 流程——上面代码做了些什么事上面的代码定义了一个名为
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |