RN基本配置

最新推荐文章于 2021-10-18 10:49:45 发布

rv0p111

最新推荐文章于 2021-10-18 10:49:45 发布

阅读量599

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/ZCMUCZX/article/details/79042706

版权

React Native 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我们如果想要用RN初始化项目的话，我们需要在终端中先进入我们希望进入的文件夹，然后再进入其中进行输入，注意项目名称不要使用中文，这样就会进行初始化，初始化其实就是去网上进行下载。

react-native init 项目名称

下载过来的项目结果如下所示，原本以前是 index.android.js 和 index.ios.js 文件而现在改成了 index.js 和 app.js了，其实app.js就是一个普通的JS 文件，它是导入到index.js 文件里面的，index.js 是入口文件

点击进入ios的文件夹我们就可以去运行里面的程序，运行起来的结果后如下所示，终端会被自动打开，其实就是运行了个本机的服务器只是下面其实一开始不是显示，我进行了修改。我们如果也可以自己去打开服务器，这样运行项目的时候就不会自动的去打开一个终端了。但是首先要在本项目的文件夹下面去使用react-native start就可以打开了

那么在哪里可以进行修改其实就是在它里面带的App.js文件里面进行修改，修改成了下面的样子

在最开始的app.js文件的其实是这样子的代码，第一个import其实就是去引入的是Component也就是说导入了抽象化组件，第二个import是引入ReactNative的具体组件。在RN中其实都是面向组件进行开发的。

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
    Image,
    TextInput
} from 'react-native';
//这里就是根据平台来选择文字是什么
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',
});
//export default关键字，来导出默认的组件,现在就是先注册了app这个类，然后导出组件
export default class App extends Component<{}> {
//对于render方法我们可以想成是ios中的viewDidLoad方法  
render() {
 //return是返回具体的内容，这里需要注意的是在view里面是不能直接放内容的
 return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
         哈哈哈
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}
//创建样式表，里面放着各种样式和CSS类似
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

之后我们再去看看index.js文件中，这里面就是先去导入AppRegistry的内置模块，然后之后去使用registerComponent去注册应用，这里就是把Demo这个控件整体去注册一次，而不是每个组件/模块都去注册

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('Demo', () => App);

在这里再简单的介绍下JSX，其实JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到了<，JSX就会当成是HTML解析，遇到{就当成是JavaScript解析，JSX最最后的时候都会被转换为javaScript，在React中被大量使用，React 其实就是一个用于构建用户界面的javaScript的库，React通过对DOM的模拟，最大限度地减少与DOM的交互，其实就是通过DOM diff算法，只会更新有差异化的部分，不用渲染整个页面，从而提高效率。我们在上面使用到的就是JSX的语法。

我们应该如何去查看我们当前的使用的React Native的版本

我们可以在终端进入到我们的项目中，然后输入react-native -v，会得到如下图所示的结果