reactnative ,rn,react, jsx 一切之入门

JSX

官方入门
中文入门
官方文档中文翻译

JSX主要是引入了一种新的变量类型, 官方就叫jsx类型, 或者element. 这是长得和html差不多的html模板(嗯, Vue比jsx高明的地方就是, vue真的就是html模板,而jsx只是长得像而已)
下面说明两者差异,以及模板内嵌变量的用法

类型|JSX|HTML/vue|比较
--|--
尖括号tag|<></>| |一样的
属性名称|首字母小写的驼峰式|全小写羊肉串式|不一样
模板|< {}>{}</>|跟Vue比,Vue是双花括号{{}}|不一样

除了属性名称写法不同,还有些字母组成也不同
JSX|HTML
--|--
className|class

jsx类型换行的话,需要用小括号()括起来.
下面是个完整演示

const h1Class = 'greeting'
const element = (
  <h1 className={h1Class}>
    Hello, world!
  </h1>
);

const element2 = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

还可以用构造器生成element

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

有三种构造器, React.createClass 、React.createElement、Component的区别

Android

• adb无法启动: 5037端口占用
  可以增加一个系统变量 ANDROID_ADB_SERVER_PORT, 值是1~65535重新选个端口, 比如60000
• 使用夜神模拟器?
  先要建立好项目并且编译好apk, 建议看官方文档中文翻译
  启动后,还是要在夜神中打开开发者模式和USB调试选项.
  然后使用adb connect 127.0.0.1:62001连接到夜神模拟器
  将项目下android\app\build\outputs\apk\debugapp-debug.apk手动安装到夜神模拟器,然后打开
  使用adb shell input keyevent 82打开app中的debug菜单
  进入Settings -> Debug server host for device, 设置为电脑的ip端口,如192.168.0.38:8081, 8081是默认端口

RN

RN中文网

下面这个例子演示了:

• 所有class都是从Component中extends, 扩展以后就是一个新组件
• 必须有个返回element的render()函数
• 组件默认有个this.props对象, 所有在模板里的属性都是这个对象的key
• 要让界面有变化,必须调用setState来修改this.state对象, 注意这个对象名称也是固定不能修改的,即使你可以一开始给他重新赋值.

  
  import React, { Component } from 'react';
  import { Text, View } from 'react-native';

class Blink extends Component {
// 声明state对象
state = { isShowingText: true };

componentDidMount() {
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({
isShowingText: !this.state.isShowingText
});
}, 1000);
}

render() {
// 根据当前showText的值决定是否显示text内容
if (!this.state.isShowingText) {
return null;
}

return (
  <Text>{this.props.text}</Text>
);

}
}

export default class BlinkApp extends Component {
render() {
return (

); } }