React Native 应用使用 TypeScript 和自定义组件 - React Native 完美 UI
Web React Native Flawless UI - react-native-flawless-ui.netlify.com适合 🔰 React Native 初学者 🔰
本文以微软的TypeScript-React-Native-Starter仓库为指导。
创建 React Native 应用
当你尝试搭建一个普通的 React Native 项目后，
就可以开始添加 TypeScript 了。让我们开始吧。
react-native init MyAwesomeProject
cd MyAwesomeProject
添加 TypeScript
下一步是将 TypeScript 添加到您的项目中。以下命令将：
- 将 TypeScript 添加到您的项目中
- 将 React Native TypeScript Transformer 添加到您的项目中
- 初始化一个空的 TypeScript 配置文件，我们接下来将对其进行配置。
- 添加一个空的 React Native TypeScript Transformer 配置文件，我们接下来会对其进行配置。
- 为 React 和 React Native 添加类型定义
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react-native
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native
该tsconfig.json文件包含 TypeScript 编译的所有设置。
上述命令创建的默认值大部分都没问题，但请打开该文件并取消注释以下行：
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": [
"es6"
],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
该文件rn-cli.config.js包含 React Native TypeScript Transformer 的设置。
打开它并添加以下内容：
module.exports = {
getTransformModulePath() {
return require.resolve("react-native-typescript-transformer");
},
getSourceExts() {
return ["ts", "tsx"];
}
};
按钮
示例按钮组件使用 TypeScript：
import React from 'react';
import {
TouchableOpacity,
} from 'react-native';
interface BProps {
activeOpacity?: number,
children: React.ReactNode,
}
const Button = ({
children,
activeOpacity,
...rest
}: BProps) => (
<TouchableOpacity activeOpacity={activeOpacity} {...rest}>
{children}
</TouchableOpacity>
);
Button.defaultProps = {
activeOpacity: 0.8,
}
export default Button;
文本
示例文本组件使用 TypeScript：
import React from 'react';
import {
Text as RNText,
TextStyle,
} from 'react-native';
import {
Consts, // size of text
Colors, // color if text
} from '../../constants';
export interface TextProps {
size?: 'S' | 'M' | 'L' | 'XL' | 'XXL'; // size name
style?: TextStyle;
bold?: boolean,
color?: string,
children: React.ReactNode;
}
const getSize: { [key: string]: number } = Consts;
const checkSize = (size: string): number => {
return getSize[size] || 0;
}
const Text = ({
size = 'M',
children,
style,
bold,
color,
...rest
}: TextProps) => (
<RNText {...rest}
style={{
...style,
fontSize: checkSize(size),
fontWeight: bold ? '700' : '400',
color: color || Colors.black,
}}
>
{children}
</RNText>
);
export default Text;
例如使用文本组件
import React, { Component } from 'react';
import { View } from 'react-native';
import Text from './Text';
const Home = () => (
<View>
{/* prop size 'S' | 'M' | 'L' | 'XL' | 'XXL' */}
{/* same '11' | '14' | '16' | '22' | '28' */}
<Text size="XL">Text component 1</Text>
{/* use fontWeight bold */}
<Text bold={true}>Text component 2</Text>
{/* custom color text */}
<Text color="#ff0">Text component 3</Text>
{/* add more style */}
<Text style={{ textAlign: 'right' }}>Text component 4</Text>
{/* use onPress of Text react native */}
<Text onPress={() => alert("Hello from Text")}>Text component 5</Text>
</View>
);
export default Home;
在 🏁 Github上查看仓库
我们究竟在进行什么单元测试？🚨
我们使用“单元测试”来指代对函数和纯 JavaScript 对象进行的测试，这些测试独立于 React Native 框架。这意味着我们不会测试任何依赖于 React Native 的组件。
查看更多