组件基础

组件声明

组件样式

样式声明

接下来我们

import { StyleSheet } from "react-native";

// 创建能够用于 React Native 组件的样式表
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "ghostwhite"
  },
  box: {
    width: 100,
    height: 100,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightgray"
  },
  boxText: {
    color: "darkslategray",
    fontWeight: "bold"
  }
});
export default styles;

在真实项目中随着组件复杂度的增加，我们往往会遵循单一职责原则将组件的样式声明抽取到单独的文件中，然后在组件内引入该样式文件，有点类似于 CSS Modules 的写法。

Flexbox 布局

应用主题设置

CSS-in-JS

React Native 允许我们以声明对象的方式来声明样式，不过我们就无法使用 CSS 中的便捷写法了。譬如在下列的 CSS 样式声明中我们使用了缩略写法来声明字体与边距样式：

font: bold 14px/16px "Helvetica";
margin: 5px 7px 2px;

其对应转换为 React Native 支持的样式对象：

{
  fontFamily: 'Helvetica',
  fontSize: 14,
  fontWeight: 'bold',
  fontStyle: 'normal',
  fontVariant: [],
  lineHeight: 16,
  marginTop: 5,
  marginRight: 7,
  marginBottom: 2,
  marginLeft: 7,
}

这里为了避免声明复杂的样式类，我们可以选用一些 CSS-in-JS 库来帮助我们处理样式或者创建带样式的组件。较为轻量级的用法可以使用  css-to-react-native 或者类似的库将 CSS 样式声明转化为对应的 React Native 样式对象：

import transform from 'css-to-react-native';
// or const transform = require('css-to-react-native').default;


transform([
  ['font', 'bold 14px/16px "Helvetica"'],
  ['margin', '5px 7px 2px'],
  ['border-left-width', '5px'],
]); // => { fontFamily: 'Helvetica', ... }

我们也可以转换某个单独的样式属性名或者匹配对象：

import { getPropertyName, getStylesForProperty } from 'css-to-react-native';


getPropertyName('border-width'); // => 'borderWidth'
getStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }

交互事件

在标准的 Web 应用中，我们能够方便地编写跨浏览器的事件响应代码；不过鉴于原生界面渲染的差异，在 React Native 中我们还需要根据不同的平台差异使用不同的响应机制。本小节我们即着眼于如何使用不同的 React Native 组件来收集用户输入或者响应用户操作，从基础的文本输入，到列表项选择、单选框以及时间日期选择器等等。