咸鱼

咸鱼是以盐腌渍后,晒干的鱼

0%

声明式UI:React Navict 简单语法总结

此文档为了对比各个声明式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