Component(组件)

一个最基本的组件构成如下：

"use strict";

var React = require("react-native");
var { AppRegistry, StyleSheet, Text, View } = React;

var HelloWorld = React.createClass({
  render: function () {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{"\n"}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
  },
});

AppRegistry.registerComponent("HelloWorld", () => HelloWorld);

Basic(组件基础)

原生组件与 HTML 元素的相同点

在 Web 领域的开发中，我们往往需要使用大量基本的 HTML 元素，包括但不限于 div、span、img 这样的，而在 React Native 中往往是使用 View、Image、Text 以及 ListView 等等替换，一个对照表如下所示：

Built-in Components

Indicator

Text

在 React Native 中，只有组件能够接受文本作为子节点，换言之，如下的写法是错的：

<View> Text doesn't go here! </View>

与之相对的，应该将文本包裹在组件中：

<View>
  <Text>This is okay!</Text>
</View>

在 HTML 中，如果需要展示一系列具有复杂格式的字符串，可能需要<strong>、<em>等动态组合，譬如：

<p>The quick <em>brown</em> fox jumped over the lazy <strong>dog</strong>.</p>

而在于 React Native 中，只有组件可以用来包裹某个文本，而如果需要对其属性进行控制，则需要利用其 Style，而不是添加<em>、<strong>这些标签。

<Text>
  The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox
  jumped over the lazy <Text style={{fontWeight: "bold"}}>dog</Text>.
</Text>

不过上述这种直接把属性写在组件里的方式会将整个代码变得非常的冗长，可以以另一种方式进行处理，譬如将独特功能的组件封装为特殊的组件：

var styles = StyleSheet.create({
  bold: {
    fontWeight: "bold",
  },
  italic: {
    fontStyle: "italic",
  },
});

var Strong = React.createClass({
  render: function () {
    return <Text style={styles.bold}>{this.props.children}</Text>;
  },
});

var Em = React.createClass({
  render: function () {
    return <Text style={styles.italic}>{this.props.children}</Text>;
  },
});

在使用了这样的自带样式的组件之后，可以以一种非常类似于 HTML 的方式去使用这些组件，譬如：

<Text>
  The quick <Em>brown</Em> fox jumped over the lazy <Strong>dog</Strong>.
</Text>

同样地，RN 中也没有类似于 h1、h2 这样地元素，不过就像类似于封装 EM 一样，可以自己基于 Text 组件进行封装。

Gallery

Image

If text is the most basic element in an application, images are a close contender, for both mobile and for web. When writing HTML and CSS for the web, we include images in a variety of ways: sometimes we use the tag, while at other times we apply images via CSS, such as when we use the background-image property. In React Native, we have a similar component, but it behaves a little differently. The basic usage of the component is straightforward; just set the source prop:

<Image source={require('image!puppies')} />

How does that require call work? Where does this resource live? Here’s one part of React Native that you’ll have to adjust based on which platform you’re targeting. On iOS, this means that you’ll need to import it into the assets folder within your XCode project. By providing the appropriate @2x and @3x resolution files, you will enable XCode to serve the correct asset file for the correct platform. This is a nice change from web development: the relatively limited possible combinations of screen size and resolution on iOS means that it’s easier to create targeted assets. For React Native on other platforms, we can expect that the image! require syntax will point to a similar assets directory. It’s also worth mentioning that it is also possible to include web-based image sources instead of bundling your assets with your application. Facebook does this as one of the examples in the UIExplorer application:

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

When utilizing network resources, you will need to specify dimensions manually. Downloading images via the network rather than including them as assets has some advantages. During development, for instance, it may be easier to use this approach while prototyping, rather than carefully importing all of your assets ahead of time. It also reduces the size of your bundled mobile application, so that users needn’t download all of your assets. However, it means that instead you’ll be relying on the user’s data plan whenever they access your application in the future. For most cases, you’ll want to avoid using the URI-based method. If you’re wondering about working with the user’s own images, we’ll discuss the Camera Roll during our exploration of platform-specific APIs. Because React Native emphasizes a component-based approach, images must be included as an component instead of being referenced via styles. For instance, last chapter, we wanted to use an image as a background for our weather application. Whereas in plain HTML and CSS you would likely use the background-image property to apply a background image, in React Native you instead use the as a container component, like so:

<Image source={require('image!puppies')}>
  {/* Your content here... */}
</Image>

Styling the images themselves is fairly straightforward. In addition to applying styles, certain props control how the image will be rendered. You’ll often make use of the resizeMode prop, for instance, which can be set to resize, cover, or contain. The UIExplorer app demonstrates this well:

The component is easy to work with, and very flexible. You will likely make extensive use of it in your own applications.

Resource

Container

Navigation

• Routing and Navigation in React Native

TabBar

Layout

Responsive

autoresponsive-react

Images

responsive-images-in-react-native

Storage

AsyncStorage

SQLite

ReactNative 对于 SQLite 的支持主要还是依靠本地 Module-Bridge。可以参考react-native-sqlit这个类库