九旬的博客

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

Text 可以包含文本的组件

Image 可以展示图片的元素

布局

最好使用flex+百分比布局，否则可能存在兼容问题。

React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。

  • 首先是默认值不同：flexDirection的默认值为column（而不是row）
  • alignContent默认值为 flex-start（而不是 stretch）
  • flexShrink 默认值为0 （而不是1）, 而flex只能指定一个数字值。