React native 版本0.57.5
良心提示：个人笔记整理 仅供参考
内容简介：RN基础语法、ES2015(ES6)语法、JSX语法
一.启动项目
- $react-native run-android
Hello World.png
二、代码分析
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
- import语句用于导入由另一个模块导出的绑定（组件）。查看详细
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
- 此声明创建一个常量，其作用域可以是全局或本地声明的块,并且常量的值
不能通过重新赋值来改变也不能重新声明。 - Platform.select( )根据不同平台使用不同的样式或者组件
type Props = {};
export default class App extends Component<Props> {
}
- 创建一个名为App的组件并默认导出
render() {}
- 必须的在render()方法中返回一些用于渲染结构的 JSX 语句。
return(
<View><Text>Hello world!</Text></View>
{/*注释*/}
)
- JSX语句使用前必须先
import
<View> 相当于HTML<div>
<Text>用来显示文本
三、Props（属性）
- 大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
- 以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。
import React, { Component } from 'react';
import { Image } from 'react-native';
export default class PropsTest extends Component {
render() {
let pic = {
uri: 'https://www.baidu.com/img/baidu_jgylogo3.gif'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
- 请注意
{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式，需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。
