此文档为了对比各个声明式UI编程语法,避免混淆。
虽然 React Native 使用了声明式的组件和语法,但由于底层的原生视图系统的存在,它并不能完全称为严格的声明式 UI 框架。
定义了一个名为 HelloWorld 的函数组件
| 12
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 
 | import React from 'react';import { View, Text, StyleSheet } from 'react-native';
 
 function HelloWorld() {
 return (
 <View style={styles.container}>
 <Text style={styles.text}>Hello, World!</Text>
 </View>
 );
 }
 
 const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 },
 text: {
 fontSize: 24,
 fontWeight: 'bold',
 },
 });
 
 export default HelloWorld;
 
 
 | 
主应用文件中,你可以使用 HelloWorld 组件
| 12
 3
 4
 5
 6
 7
 8
 9
 
 | import React from 'react';import { AppRegistry } from 'react-native';
 import HelloWorld from './HelloWorld';
 
 function App() {
 return <HelloWorld />;
 }
 
 AppRegistry.registerComponent('YourApp', () => App);
 
 | 
TODO