此文档为了对比各个声明式UI编程语法,避免混淆。
虽然 React Native 使用了声明式的组件和语法,但由于底层的原生视图系统的存在,它并不能完全称为严格的声明式 UI 框架。
定义了一个名为 HelloWorld
的函数组件
1 2 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 组件
1 2 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