React Native基础 了解一下（一）

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 语句中。