import React, {Component} from 'react';
import {
    AppRegistry,
    Platform,
    StyleSheet,
    View,
    Text,
    Image,
    Dimensions,
    PixelRatio,
} 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',
});

const {height, width} = Dimensions.get('window');   //注意 height 和 width 的用法
const width = Dimensions.get('window').width;
const margin = width * 0.05;
const pixelRatio = PixelRatio.get();

export default class App extends Component {
    render() {
        // 列印log的方式，用 console.log 沒看到手機上輸出的資訊
        // console.warn('console.warn ==> Screen height is:' + height);
        // console.error('console.error ==> Screen height is:' + height);
        // console.error('console.error ==> Screen height is:' + typeof(height));
        let temp = {
            name: 'xixi',
            age: 18,
            sex: 'fale'
        }
        console.log('temp');
        console.log(temp);
        console.warn(temp);
        // console.error(temp);
        // let aValue;
        // console.error('aValue is:' + aValue);
        // console.error('The type of aValue is:' + typeof(aValue));

        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    一邏輯畫素等於{pixelRatio}實際畫素單位 {/* 這裡是註釋，JSX 語法中的註釋的寫法 */}
                </Text>
                <Text style={styles.instructions}>
                    手機螢幕高度為{height}邏輯畫素
                </Text>
                <Text style={styles.instructions}>
                    手機螢幕寬度為{width}邏輯畫素
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        margin: margin    //注意這裡，margin 值呼叫的是上面宣告的 const margin
    }
});
 

console.warn() 和 console.error()

輸出變數

console.error('console.error ==> Screen height is:' + height);

輸出變數型別

console.error('console.error ==> Screen height is:' + typeof(height));

輸出物件

let temp = {
  name: 'xixi',
    age: 18,
    sex: 'fale'
}
console.error(temp);

let temp = {
   name: 'xixi',
    age: 18,
    sex: 'fale'
}
console.warn(temp);
 

除錯時，可以選擇使用 android device monitor 協助輸出 log 日誌資訊

開啟 CMD，執行命令 $ monitor

會開啟 Android SDK 自帶的 ADM 除錯工具

此時，reload 應用，就會在 ADM 上的 logcat 中列印輸出日誌

點選 logcat 左側的綠色＋號，在 “by PID” 輸入框中輸入應用的 PID，在 “by Log Tag” 輸入框中輸入 “ReactNativeJS”，通過應用的 pid 或來控制只顯示當前除錯的應用的日誌資訊方式來過濾當前應用輸出的日誌內容。

注意：每次重啟應用，應用的 PID 值都會改變喲。還有，ADM 工具不支援斷點除錯呢，不過因為 RN 除錯高效快捷，所以很少用到斷點除錯。

至此、Over