如何安装react native

发布网友发布时间：2022-04-22 14:37

我来回答

共2个回答

懂视网时间：2022-04-22 18:58

2. 特点

高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。

灵活 ?React可以与已知的库或框架很好地配合。

JSX ? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但建议使用它。

组件 ? 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

单向响应的数据流 ? React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。(Redux)

3. [安装] (https://doc.react-china.org/docs/installation.html)

yarn init
yarn add react react-dom react-scripts

package.json

{ "name": "test", "version": "1.0.0", "description": "zzz", "main": "index.js", "license": "MIT", "dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0", "react-scripts": "^1.0.17"
 }, "scripts": { "start": "react-scripts start"
 }
}

4. 组件

1. ES6 class

class Welcome extends React.Component {
 render() { return (  <h1> Hello, {this.props.name} </h1>
 )
 }
} 
class App extends React.Component {
 render() {
 return (  <p>
  <Welcome name = "zhz1" />
  <Welcome name = "zhz2" />
  <Welcome name = "zhz3" />
  </p>
 )
 }
}

2. 函数式 (无状态组件)

function Welcome(props) {
 return <h1> Hello, {props.name} </h1>}
function App() {
 return ( <p>
  <Welcome name = "zhz1" />
  <Welcome name = "zhz2" />
  <Welcome name = "zhz3" />
 </p>
 )
}

3. ES5-写法 React.createClass(仅做参考)

React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。

const Welcome = (props) => { return <h1> Hello, {this.props.name} </h1>}
const App = React.createClass ({
 render() {
 return (  <p>
  <Welcome name1 = "ss" />
  <Welcome name1 = "zhz2" />
  <Welcome name1 = "zhz3" />
  </p>
 )
 }
});

导出(提供接口)
export default App

5. Props 属性

6. State 状态

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）（想看更多就到PHP中文网React参考手册栏目中学习）

class Welcome extends React.Component {
 render() { return (  <h1 onClick={this.props.onClick} > Hello, {this.props.name} </h1>
 )
 }
} 
class App extends React.Component {
 constructor() {
 super();
 this.state = {
  selected: false
 }
 }
 changeText() {
 this.setState((preState, props) => ({
  selected: !preState.selected
 }))
 }
 render() {
 return (  <p> 
  <Welcome name= {this.state.selected ? "zhz3-selected" : "zhz3" } onClick={() => this.changeText()} />  <h1 onClick={() => this.changeText()}> {this.state.selected ? "zhz3-selected" : "zhz3" } </h1>
  </p>
 )
 }
}
export default App;

6. 注意

class 属性变为 className

tabindex 属性变为 tabIndex

for 属性变为 htmlFor

textarea 的值通过需要通过 value 属性来指定

style 属性的值接收一个对象，css 的属性变为驼峰写法，如：backgroundColor。

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

热心网友时间：2022-04-22 16:06

reactnative的安装方法安装Android SDK（可借助类似Android Studio安卓开发软件来完成）；需要配置path，加入如：E:\Android\sdk\platform-tools;E:\Android\sdk\tools;E:\Android\sdk; 安装node.js 由于nodejs中使用GYP进行项目构建管理