文本和可触摸的样式类型注释

Question

我正在尝试使用Flow键入我的React本机项目，但是我很难找到Text和TouchableOpacity元素的类型定义，因此我可以参考其style Prop类型定义。如何导入和/或参考这些元素的类型定义？

代码下面：

// @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 type。

1。 react-native 通用方式

参考 React-native 库，

swipablequickactionbutton.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 />定义了CC_11，如下所示，与每个Picker项目的文本样式相对应。

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,
}