组件基础

组件声明

组件样式

样式声明

接下来我们

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组件来收集用户输入或者响应用户操作，从基础的文本输入，到列表项选择、单选框以及时间日期选择器等等。