React Native
React Native 中文网open in new window
RN 解决的问题
特点是一次学习,随处编写。支持WEB、 Android 和 iOS 的原生应用。
RN 开发需要注意的地方
常用的原生组件
View.
和 div 大致是一样的,展示页面的主要组件,支持嵌套。但是不支持点击,可以使用 TouchableOpacity 组件包一下。
TouchableOpacity 可以触发点击事件的组件:
import React, { Component } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
class App extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
onPress = () => {
this.setState({
count: this.state.count + 1
});
};
render() {
const { count } = this.state;
return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text>Count: {count}</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text>Press Here</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
}
});
export default App;
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
Text 可以包含文本的组件
Image 可以展示图片的元素
布局
最好使用flex+百分比布局,否则可能存在兼容问题。
React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致,当然也存在少许差异。
- 首先是默认值不同:flexDirection的默认值为column(而不是row)
- alignContent默认值为 flex-start(而不是 stretch)
- flexShrink 默认值为0 (而不是1), 而flex只能指定一个数字值。