美文网首页
React Native基础 了解一下(一)

React Native基础 了解一下(一)

作者: 牧码匠 | 来源:发表于2018-11-23 16:28 被阅读0次

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

相关文章

网友评论

      本文标题:React Native基础 了解一下(一)

      本文链接:https://www.haomeiwen.com/subject/ezvdqqtx.html