Question

我想使用FlowType。但我在覆盖React-Native中的所有元素时遇到问题。我有一个组件的两个版本。我在同一个地方遇到同样的问题。

这是我的组件。我这样做了example：

// @flow
import React, { PropTypes, Component } from 'react';
import {
  StyleSheet,
  TextInput,
  Picker,
 } from 'react-native';
import styleConstants from '../../styles/style-constants';

const styles = StyleSheet.create({
  textField: {
    width: 200,
    height: 40,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: styleConstants.colorBasicBackground,
  },
});

export type Props = {
  +accessibilityLabel: string,
}

const textInputTest = ({
  accessibilityLabel,
}: Props): ReactElement => (
  <TextInput
    accessibilityLabel={accessibilityLabel}
    style={styles.textField}
  />
);

export default textInputTest;

这是流量覆盖：当我删除styles和道具style时，没有任何事情发生。 <TextInput ... />将标记为红色。

这是同一组件的第二个版本：

// @flow
import React, { PropTypes, Component } from 'react';
import {
  StyleSheet,
  TextInput,
 } from 'react-native';
import styleConstants from '../../styles/style-constants';

const styles = StyleSheet.create({
  textField: {
    width: 200,
    height: 40,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: styleConstants.colorBasicBackground,
  },
});

export type Props = {
  +accessibilityLabel: string,
  keyboardType?: string,
  multiline?: boolean,
  +onChangeText: () => void,
  style?: StyleSheet.Styles,
  defaultValue?: string,
}

export default class TextField extends Component {
  static defaultProps = {
    keyboardType: 'default',
    multiline: false,
    style: null,
  };

  render() : React.Element<any> {
    const {
      accessibilityLabel,
      keyboardType,
      multiline,
      onChangeText,
      style,
      defaultValue,
    } : Props = this.props;

    return (
      <TextInput
        accessibilityLabel={accessibilityLabel}
        autoCapitalize={'none'}
        keyboardType={keyboardType}
        multiline={multiline}
        onChangeText={onChangeText}
        style={[styles.textField, style]}
        defaultValue={defaultValue}
      />
    );
  }
}

和流量覆盖：

我在同一个地方有同样的红色错误。我如何覆盖TextInput和styles？

感谢您的回答......

更新我的.flowconfig：

[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*

; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
.*/Libraries/react-native/ReactNative.js

#APP related
.*/node_modules/react-render-hook/.*
.*/node_modules/unexpected-htmllike-jsx-adapter/.*
.*/node_modules/unexpected-htmllike-raw-adapter/.*
.*/node_modules/unexpected-htmllike-testrenderer-adapter/.*
.*/node_modules/flow-coverage-report/.*
<PROJECT_ROOT>/coverage/.*
<PROJECT_ROOT>/flow-coverage/.*
<PROJECT_ROOT>/gulpfile\.js

[include]

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow
flow/

[options]
emoji=true

module.system=haste

experimental.strict_type_args=true

munge_underscores=true

module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-8]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowIgnoreShellowRenderingTest
suppress_comment=\\(.\\|\n\\)*\\$FlowIgnoreMockDataTest

unsafe.enable_getters_and_setters=true

[version]
^0.38.0

我无法通过FlowType覆盖RN Elements

0 个答案: