Text 和 TouchableOpacity 样式类型注解

Question

我正在尝试使用 Flow 对我的 React Native 项目进行类型注释，但我无法找到 Text 和 TouchableOpacity 元素的类型定义，因此我可以引用它们的 style 道具类型定义。如何导入和/或引用这些元素的类型定义？

代码如下：

// @flow
import * as React from "react";
import { Text, TouchableOpacity } from "react-native";

type Props = {
    segmentIndex: number,
    segmentInfo: {
        title: string
    },
    segmentStyle: ???, // WHAT SHOULD I USE HERE?
    titleStyle: ???, // WHAT SHOULD I USE HERE?
    onSelection: (number) => void
}

export const SegmentButton = (props: Props) => {
    const _segmentPressed = () => {
        props.onSelection(props.segmentIndex)
    }

    return (
        <TouchableOpacity style={props.segmentStyle} onPress={_segmentPressed}>
            <Text style={props.titleStyle}>{props.segmentInfo.title.charAt(0).toUpperCase() + props.segmentInfo.title.substring(1)}</Text>
        </TouchableOpacity>
    )   
}

Answer 1

有很多方法可以定义StyleSheet 类型。

1。 react-native 通用方式

来自 react-native 库的引用，

SwipeableQuickActionButton.js

import { View } from 'react-native';

type Prop = {
    style?: ?View.propTypes.style,
}

2。 react-navigation 通用方式

来自 react-navigation 库的引用，

TypeDefinition.js

export type Style =
  | { [key: string]: any }
  | number
  | false
  | null
  | void
  | Array<Style>;

如果您已经安装了react-navigation，请从以下位置导入：

import type { Style } from 'react-navigation/src/TypeDefinition';

type Prop = {
    style?: Style,
}

或者您仍然可以通过在自己的文件中定义来使用它。

3。使Style 类型特定于<Text /> 和<TouchableOpacity />

这将是一种艰难的方式——虽然可行，但看看这是否值得。

以<Picker /> 为参考，它为<Text /> 定义了itemStyle，如下所示，对应于每个选择器项的文本样式。

var StyleSheetPropType = require('StyleSheetPropType');
var TextStylePropTypes = require('TextStylePropTypes');
var TextStyle = StyleSheetPropType(TextStylePropTypes);

type Prop = {
    itemStyle: TextStyle
}

要在您自己的库中使用它，请从以下位置导入它们：

import TextStylePropTypes from 'react-native/Libraries/Text/TextStylePropTypes';
import StyleSheetPropType from 'react-native/Libraries/StyleSheet/StyleSheetPropType';

let TextStyle = StyleSheetPropType(TextStylePropTypes);

type Prop = {
    style?: ?TextStyle,
}