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分别存储屏幕的宽，高，和像素密度