繼上一篇文章，我們的環境已經搭建完畢。下來，我們開始第一個項目的開發與學習中。

首先我們需要創建一個工程，打開命令行終端。使路徑改變到你需要創建工程的路徑下，然后執行 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分別存儲屏幕的寬，高，和像素密度