繼上一篇文章，我們的環境曾經搭建終了。上去，我們開端第一個項目的開發與學習中。

首先我們需求創立一個工程，翻開命令行終端。使途徑改動到你需求創立工程的途徑下，然後執行 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辨別存儲屏幕的寬，高，和像素密度

【React Native跨平台挪動使用學習與開發(二) 第一個項目】的相關資料介紹到這裡，希望對您有所幫助！ 提示：不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦！