React Native 项目（React Native 打印 log 日志输出）

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