React Native填坑之旅--Flow篇

// @flow
import React, { Component } from 'react';
import { View, Text } from 'react-native';
 
// 定义一个用户类型
type User = {
  name: string,
  age: number,
};
 
// 定义一个组件的属性类型
type Props = {
  user: User,
};
 
export default class UserInfo extends Component<Props> {
  render() {
    const { user } = this.props;
    return (
      <View>
        <Text>用户名: {user.name}</Text>
        <Text>用户年龄: {user.age}</Text>
      </View>
    );
  }
}
 
// 使用组件时，需要提供一个符合User类型的user属性
// 例如：
// <UserInfo user={{ name: 'Alice', age: 25 }} />

这段代码使用了Flow来为React Native组件添加类型检查。通过定义User和Props类型，我们可以确保传入组件的user属性是一个对象，并且包含name和age两个属性，且它们的类型分别为string和number。这有助于在编译时而不是运行时发现类型错误，从而提高代码质量。