Question

我最近开始在本机项目中使用流程。

因此，我的基本意图是将流仅用于功能组件中的props。

所以我最初是这样设置的

//@flow
import theme from './../../themes/colorFont'
import React from 'react'
import {Text, TouchableOpacity} from 'react-native'

type functionProp = {
    btnText: string, 
    colorType: number, 
    btnType: number,
    onPress: void,
    btnStyle?: Object, 
    textStyle?: Object
}


const button = (props:functionProp) => {

const TYPE_LARGE_ROUND = 1
    const TYPE_SMALL_ROUND_OUTLINE = 2
    const TYPE_SMALL_ROUND = 3
    const TYPE_SMALL_FILTER = 4
    const COLOR_BLUE = 1
    const COLOR_WHITE = 2
    const COLOR_GREEN = 3

    const {btnStyle, textStyle, onPress, btnType, btnText, colorType} = props

    let subStyle:objectStyle = {
        width: 300,
        height: 50,
        borderRadius: 20,
        backgroundColor: theme.primaryBlue
    }

let textSubStyle = {
    color: theme.primaryWhite
    }

if (btnType == TYPE_LARGE_ROUND) {
    subStyle = {
        width: 300,
        height: 50,
        borderRadius: 30
    }
    textSubStyle.fontSize = 20
    textSubStyle.fontWeight = 'bold'

然后我在最后两行说

开始出错

无法为fontSize分配20，因为对象常量中缺少属性fontSize

因此，即使我不想对let subStyle和let textSubStyle进行任何类型检查，我还是为同一对象创建了对象类型，即

type objectStyle = Object

然后

 let subStyle: objectStyle = {
            width: 300,
            height: 50,
            borderRadius: 20,
            backgroundColor: theme.primaryBlue
        }

    let textSubStyle: objectStyle = {
        color: theme.primaryWhite
    }

因此，第一个问题是这是使用它的正确方法，我们是否需要为代码中的每个对象/声明创建类型？通常，作为开发人员，您是在单独的文件中还是在同一文件中创建类型？

第二，我有

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center'
    },

    logo: {
        width: 240,
        height: 90
    },

    subText: {
        color: theme.textGrey
    }
})

为此，我应该如何使用流量？ StyleSheet.create:objectStyle(？

Answer 1

如果您的项目中确实需要静态类型检查，请使用Flow，因为它功能强大。

所以，第一个问题是这是使用它的正确方法，我们是否需要为代码中的每个对象/声明创建类型？

良好的做法是annotate。 React native已经为Types拥有StyleSheet。

import { StyleSheet } from 'react-native';

type Props = {
  style?: StyleSheet.Styles;
};

或者您的情况：

let subStyle: StyleSheet.Styles = {
  width: 300,
  height: 50,
  borderRadius: 20,
  backgroundColor: theme.primaryBlue
}

自定义 StyleSheet 类型：

type MyCustomStyle = {
  width: number,
  height: number,
  // other props you need
}

let subStyle: MyCustomStyle = {
  width: 100,
  height: 100,
}

一般来说，您是开发人员在单独的文件中还是在同一文件中创建类型？

我的方法是在需要的地方声明类型。如果您需要其他文件/模块中的某些类型，请使用import / export：

模块1：

export type Foo = { name: string };

模块2：

import type { Foo } from './module1.js';

const foo: Foo = { name: 'Marko' };

一个有用的链接：GitFlow

如何在React中正确使用流程

1 个答案: