StyleSheet.create“未被流覆盖”

Posted

技术标签:

【中文标题】StyleSheet.create“未被流覆盖”【英文标题】:StyleSheet.create "not covered by flow" 【发布时间】:2017-10-05 06:31:31 【问题描述】:

我在带有核素的反应原生项目中使用流 0.42.0。

使用默认项目,我收到以下消息:

伴随着以下错误:

> flow check
index.ios.js:40
 40:             <View style=style.container>
                                    ^^^^^^^^^ property `container`. Property cannot be accessed on possibly undefined value
 40:             <View style=style.container>
                              ^^^^^ undefined

index.ios.js:40
 40:             <View style=style.container>
                                    ^^^^^^^^^ property `container`. Property not found in
 40:             <View style=style.container>
                              ^^^^^ Array

index.ios.js:41
 41:                 <Text style=style.welcome>
                                        ^^^^^^^ property `welcome`. Property cannot be accessed on possibly undefined value
 41:                 <Text style=style.welcome>
                                  ^^^^^ undefined

index.ios.js:41
 41:                 <Text style=style.welcome>
                                        ^^^^^^^ property `welcome`. Property not found in
 41:                 <Text style=style.welcome>
                                  ^^^^^ Array

index.ios.js:44
 44:                 <Text style=style.instructions>
                                        ^^^^^^^^^^^^ property `instructions`. Property cannot be accessed on possibly undefined value
 44:                 <Text style=style.instructions>
                                  ^^^^^ undefined

index.ios.js:44
 44:                 <Text style=style.instructions>
                                        ^^^^^^^^^^^^ property `instructions`. Property not found in
 44:                 <Text style=style.instructions>
                                  ^^^^^ Array

index.ios.js:47
 47:                 <Text style=style.instructions>
                                        ^^^^^^^^^^^^ property `instructions`. Property cannot be accessed on possibly undefined value
 47:                 <Text style=style.instructions>
                                  ^^^^^ undefined

index.ios.js:47
 47:                 <Text style=style.instructions>
                                        ^^^^^^^^^^^^ property `instructions`. Property not found in
 47:                 <Text style=style.instructions>
                                  ^^^^^ Array


Found 8 errors

这个问题(https://github.com/flowtype/flow-typed/issues/631)似乎表明正确的类型是StyleSheet.Styles,但这给了我相同的信息(以及上面的相同错误):

有什么方法可以让我在这里正常工作吗?

供参考,完整文件为:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,  Component  from 'react';
import 
  AppRegistry,
  StyleSheet,
  Text,
  View
 from 'react-native';

export default class PartalkReact extends Component 
    render() 
        return (
            <View style=styles.container>
                <Text style=styles.welcome>
                    Welcome to React Native!
                </Text>
                <Text style=styles.instructions>
                    To get started, edit index.ios.js
                </Text>
                <Text style=styles.instructions>
                    Press Cmd+R to reload,'\n'
                    Cmd+D or shake for dev menu
                </Text>
            </View>
        );
    


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  welcome: 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  ,
  instructions: 
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  ,
);

AppRegistry.registerComponent('PartalkReact', () => PartalkReact);

编辑 升级到 flow 0.45.0 后,根据 cmets,我的文件不再有问题,但 react 本身失败并出现以下错误:https://pastebin.com/raw/Ngpagayi

【问题讨论】:

【参考方案1】:

在你的班级上方添加这个:

type Props = 
    style?: StyleSheet.Styles;
; 

【讨论】:

【参考方案2】:

我一直在使用以下方法取得了不错的成功 如果您使用不存在的样式属性并启用代码完成,这将显示错误

const rawStyles =  ... 
export const styles: typeof rawStyles = StyleSheet.create(rawStyles)

【讨论】:

【参考方案3】:

对于在 2018 年底仍遇到此问题的任何人,首选解决方案更改为:

import type 
  ViewStyleProp,
  TextStyleProp,
  ImageStyleProp,
 from 'react-native/Libraries/StyleSheet/StyleSheet';

来源:https://github.com/flow-typed/flow-typed/issues/631

【讨论】:

【参考方案4】:

警告是因为第三方还没有整合流到他们的终点。在我们的例子中,样式表给出了警告,所以 react native 是没有集成流的第三方。 React native 只包含一些组件中的流,可能只是核心组件,并且是他们官方声明的。

正如你所说,react-native 在样式表中使用流,所以我得出了一个结论:

import type  StyleObj  from 'react-
native/Libraries/StyleSheet/StyleSheetTypes';

type Props = 
    style?: StyleObj,
;

另一种方法是升级流程。

干杯:)

【讨论】:

但是 react 原生源在 create 函数上有流输入。见github.com/facebook/react-native/blob/master/Libraries/… 另外,我似乎无法 cmd+click 上 create 函数跳转到它,这表明 flow 出于某种原因没有解析 react native 源代码。 我很抱歉;我还是很新的反应。我究竟如何使用您提供的摘录?只需在文件中添加它就不会产生任何区别。您可以修改我的示例文件作为演示吗? 让我们continue this discussion in chat。 你有这个代码在实际设置中工作吗?如果是这样,你能传递你的.flowconfig.package.json 吗?我仍然无法让它为我的生活工作。

以上是关于StyleSheet.create“未被流覆盖”的主要内容,如果未能解决你的问题,请参考以下文章

我为什么要使用React原生StyleSheet?

动态样式表属性访问的类型问题

如何在 React Native 中使用 CSS

react-创建组件

react-native style怎么包裹使用

放置右上角 react native