StyleSheet.create“未被流程覆盖”

时间:2017-05-07 03:40:57

标签: css react-native flowtype

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

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

enter image description here

以下错误:

> 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,但这给了我相同的消息(以及上面的相同错误):

enter image description here

有什么方法可以在这里进行正确的流程输入吗?

作为参考,完整的文件是:

/**
 * 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);

编辑升级到流量0.45.0后,根据评论,我的文件不再出现问题,但反应失败并出现以下错误:https://pastebin.com/raw/Ngpagayi

3 个答案:

答案 0 :(得分:2)

警告是因为第三方尚未将流量整合到他们的最终。在我们的例子中,StyleSheet发出警告,因此本机反应是没有集成流的第三方。 React native仅包含某些组件中的流可能只是核心组件,并且由它们正式声明。

正如你所说,本地反应是在样式表中使用流程,所以我得出结论:

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

type Props = {
    style?: StyleObj,
};

另一种方法是升级流程。

干杯:)

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

在您的课程上方添加此内容:

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