布局基础

语法基础

声明组件

import React, { Component } from "react";
import { AppRegistry, Text } from "react-native";

class HelloWorldApp extends Component {
  render() {
    return <Text>Hello world!</Text>;
  }
}

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

在 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>

import { Text, View } from 'react-native';
import React from 'react';

const CustomComponent = props => (
    <View
        style={props.containerStyle}
    >
      <View
        style={props.someCoolContainerStyle}
      >
        <Text
          style={props.someCoolTextStyle}
        >
        </Text>
      </View>
    </View>
);

CustomComponent.propTypes = {
    containerStyle: View.propTypes.style,
    someCoolTextStyle: Text.propTypes.style,
    someCoolContainerStyle: View.propTypes.style,
};

export default CustomComponent;

样式与布局

在讲解 React Native 的样式之前，需要先介绍下 FaceBook 本身推荐的模式，它强烈的推荐重用带样式的组件而不是样式本身。并且 React Native 是不支持样式继承的，如它在文档中所述：

你并没有被允许去为整个节点树设置一个默认的譬如字体这样的属性，推荐的方式是通过创建一个带有一致的字体样式的组件并且在整个应用中通过重用组件的方式来完成样式的统一与继承。在 CSS 种，Media Query 是非常常用的技巧之一，而在 React Native 种，并不能够直接运用上 CSS 的一些属性，不过可以使用如下方式：

var Dimensions = require('Dimensions');
var { width, height } = Dimensions.get('window');

Flexbox 布局

交互事件响应

Links

最近更新于 0001-01-01