React Native跨平台移动应用学习与开发(二) 第一个项目

继上一篇文章，我们的环境已经搭建完毕。下来，我们开始第一个项目的开发与学习中。

首先我们需要创建一个工程，打开命令行终端。使路径改变到你需要创建工程的路径下，然后执行 react-nactive init 项目名。之后我们需要等待，一段时间之后，在相应的路径会生成项目。

然后打开该目录里面的IOS工程，选择模拟器运行该工程之后，模拟器出现三行字。这个就是我们新建工程之后出来的样子。下来，我们接着做第一步修改部分代码。在新建工程目录里找到index.ios.js文件并打开。接着我们替换成下面一段代码

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

/*需要添加的代码let Dimensions = require('Dimensions');let PixelRatio = require('PixelRatio');let totalWith = Dimensions.get('window').width;let totalHeight = Dimensions.get('window').height;let pixelRatio = PixelRatio.get();

*/

export default class ReactNativeDemo extends Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>        pixelRatio = {pixelRatio} //需要修改这里一行        </Text>        <Text style={styles.instructions}>        totalWith = {totalWith} //需要修改这里一行        </Text>        <Text style={styles.instructions}>        totalHeight = {totalHeight} //需要修改这里一行        </Text>      </View>    );  }}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,  },});AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

接着我们选中模拟器，按command+r来刷新界面，我们发现现实的文字变了。变成我们修改的文字。

在修改的代码中，我们首先通过React Native提供的require语句将Dimensions于PixelRatio模块加载至Dimensions于PixelRatio变量，然后声明三个变量，totalWidth,totalHeight,pixelRatio分别存储屏幕的宽，高，和像素密度