React Native – 一个最简单的入门样例（附代码说明）

2024-11-23

使用
React Native 进行开发时，首先要根据业务来划分组件。通过对不同的功能开发不同的入口组件，使得每个功能或者功能集合能够独立出来，这样也便于日后使用和代码移植。本文通过一个简单的入门样例，演示组件的创建、使用以及相关样式的设置。

1，React Native与HTML5在布局书写上的差异

（1）元素显示层级的不同

HTML5 上元素的显示层级是前面比后面的高，即前面的元素会覆盖后面的元素。
React Native 中显示层级是后面比前面高，即前面的元素会被后面的元素覆盖。

（2）
CSS 书写方式的差异

HTML5 里的 CSS 以分号（;）结尾。React Native 中 CSS 以逗号（,）结尾。
HTML5 里 CSS 中 key 和 value 都不加引号。React Native 中 CSS 属于 JavaScript 对象，如果 value 为字符串，需要用引号引起来，并且 key 值中间不能出现“-”，一定要转为驼峰命名方式。
HTML5 里 CSS 中 value 值为数字时，需要带单位。React Native 中则不带。

2，组件样式的设置

React Native 中所有的组件都有
style 属性，我们可以使用它设置组件的样式。其属性值的格式为：
{JavaScript JSON对象}。

（1）引用单个外部样式

<View style={styles.container}/>

（2）引用多个外部样式

<View style={[styles.center, styles.flex]}/>

（3）使用内联样式

<View style={{flex:1, borderWidth:1, borderColor:'red'}}/>

（4）外部样式、内联样式一起使用

<View style={[styles.center, {flex:1, borderWidth:1, borderColor:'red'}]}>

3，样例效果

（1）整个页面中央显示一行文字和一张图片。（2）同时设置了文字、背景、布局等的样式。

4，样例代码

（1）首先创建一个名为
HelloWorld 的项目怎么创建
React Native 工程这里不再讲了，具体参考我之前的文章：
React Native - macOS下环境搭建（开发第一个应用）

（2）创建后，将
index.ios.js 中的代码改成如下：

 import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
   Text,
   View,
   Image
 } from 'react-native';

class Main extends Component {
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>欢迎访问hangge.com</Text>
         <Image style={{width:130,height:55, resizeMode: Image.resizeMode.contain}}
                source={{uri:'https://git.oschina.net/hangge/hangge.com/raw/master/logo.png'}}>
         </Image>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#87e6e3',
   },
   welcome: {
     fontSize: 20,
     color: "#FFFFFF",
   },
 });

 AppRegistry.registerComponent('HelloWorld', () => Main);

5，代码说明

（1）1~8行引入
react-native 模块，并定义了
AppRegistry,
StyleSheet,
Text,
View,
Image 这
5个对象。其中前两个为
React Native 的
API，后三个为
React Native 的组件。

（2）10行通过
extends Component 方式创建了一个组件。

（3）11~20行
render 是视图渲染的方法，渲染的内容是一行文本和一张图片。同时组件上有个
style 属性，通过
style={对象} 的形式包含一个样式对象。

（4）23~34行
StyleSheet.create 创建的是一个样式表的类，里面包含
container 和
welcome 这两个样式对象。这里要注意，样式书写格式与
CSS 不一样，需要使用驼峰命名规则。

（5）36行通过
AppRegistry API 来注册应用程序的入口，这样就能根据入口组件动态加载其他组件。
registerComponent 方法的参数说明如下：