1.3 熟悉项目

我们简单熟悉下 RN 项目结构

TShop
    |-- android
    |-- ios
    |-- node_modules
    |-- index.js
    |-- App.js
    |-- package.json

android 和 ios 对应的就是原生代码，分别可以通过 Android Studio 和 Xcode打开，目前里面自动生成一些初始化代码，项目用到混合开发的时候会用到。
node_modules 里面内容非常多，这是我们项目依赖文件。
package.json 是项目说明文件。里面可以看到
```
...
"dependencies": {
  "react": "16.3.1",
  "react-native": "0.55.3"
},
...
```
这段代码说明了当前项目的依赖。
index.js 是程序的入口文件，里面引入了 App.js 文件，并注册程序。

import { AppRegistry } from 'react-native';
import App from './App'; // 引入了 App.js

// 注册程序
AppRegistry.registerComponent('TShop', () => App);

App.js 里面存放执行的示例代码。代码片段1-1

//...
// 导入React 和 RN 控件
import React, {Component} from 'react';
import { 
    Platform,
    StyleSheet,
    Text,
    View
} 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',
});

type Props = {};
// ES6 语法
export default class App extends Component<Props> {

    render() {
        return ( // 渲染布局
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </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,
    },
});

代码片段 1-1

参考代码片段1-1 ，App 就是当前程序展示的内容。RN 使用 JSX 语法，其实就是对 JS 语法进行了扩展，内置了一大堆标签。

这里面的写法有点类似于网页写法， render() 函数是用来渲染界面的，<View> 控件嵌套着三个<Text/> 控件，默认垂直排列，每个控件的样式又来源于下面的 styles 常量，styles里的写法类似于 CSS 。

我们修改下 render() 函数，让里面显示的内容变化下，看看效果。

export default class App extends Component<Props> {

    render() {
        return ( // 渲染布局
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    这是 React Native 基础代码
                </Text>

            </View>
        );
    }
}
// 样式文件
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 30, // 字体大小
        textAlign: 'center', // 文字居中对齐
        color: 'red', // 字体颜色改成红色
    }
});

代码片段1-2

我们只保留了一个 <Text>控件，文字颜色改成红色。执行react-native run-ios 或者 react-native run-android 运行程序。

如果已经通过上面指令运行过一次，如果没修过 Android 或 iOS 原生代码，可以通过热加载的方式直接更新程序：

Android 模拟器双击 R，
iOS 模拟器点击 command + R即可。

调出模拟菜单方式：

Android 模拟器 command/ctrl+ M
iOS 模拟器 command+D

运行结果如图1-2所示。

图1-2 运行结果

布局检查

在 Android 模拟器上运行可以打开 Android Studio 中自带的布局检查工具， Tools -> Layout Inspector 查看当前布局。如图1-3 所示，可以发现 RN中定义的 Text 组件在 Android 中转换成了 ReactTextView 控件，而这个控件继续 Android 中的 TextView。可以证明 RN 把 JSX 转换成了原生控件，提高了运行效率。

查看代码

如果你已经从 GitHub 上克隆了这个程序的 Git 仓库，那么可以执行 git checkout 1a 签出程序的这个版本。需要执行 npm install 或 yarn install

1.3 熟悉项目

1.3 熟悉项目

布局检查

results matching ""

No results matching ""