堆栈内存溢出
  繁体   English   中英

道具类型失败：提供给Styled（Container）的类型为number的道具类型无效，预期对象

[英]Failed prop type: Invalid prop `style` of type `number` supplied to `Styled(Container)`, expected `object`

 原文  2017-05-02 07:27:05  1   3    javascript/ html/ css/ reactjs/ react-native

问题描述

我刚刚收到此警告，该警告正在填充我的控制台： 

Warning: Failed prop type: Invalid prop `style` of type `number` supplied to `Styled(Container)`, expected `object`.
    in Styled(Container) (created by SearchPage)
    in SearchPage (created by Connect(SearchPage))
    in Connect(SearchPage) (created by Vepo)
    in Vepo (created by App)
    in Provider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

这是有问题的代码：

SearchPage.js 

import { ScrollView, StyleSheet } from 'react-native'
import {
  Container,
  Button,
  Text,
  Header,
  Body,
  Right,
  Left,
  Title
} from 'native-base'
import React from 'react'
import Keywords from '../keywords/Keywords'
import Categories from '../categories/Categories'
import Location from '../location/Location'
import Map from '../map/Map'
import Drawer from 'react-native-drawer'
import { connect } from 'react-redux'
import { toggleMenu } from './searchPage.action'
import { styles } from '../../style'

const mapStateToProps = (state) => ({
  isMenuOpen: state.get('searchPage').get('isMenuOpen')
})

const mapDispatchToProps = (dispatch) => ({
  toggleMenu: () => {
    dispatch(toggleMenu())
  }
})

let SearchPage = (props) => {
  const menu = (
    <Container>
      <Header style={styles.header}>
        <Left>
          <Button transparent>
          </Button>
        </Left>
        <Body>
          <Title style={styles.title}>Search</Title>
        </Body>
        <Right>
        </Right>
      </Header>
      <Container style={styles.container}>
        <ScrollView >
          <Categories />
          <Location />
          <Keywords />
          <Button block style={styles.wideButton} onPress={() => props.toggleMenu()}><Text>GO</Text></Button>
        </ScrollView>
      </Container>
    </Container>
  )
  return (
    <Drawer
      open={props.isMenuOpen}
      content={menu}
    >
      <Container style={mapStyles.container}>
        <Map />
      </Container>

    </Drawer>
  )
}
SearchPage.propTypes = {
  toggleMenu: React.PropTypes.func.isRequired,
  isMenuOpen: React.PropTypes.bool.isRequired
}

SearchPage = connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchPage)

export default SearchPage

const mapStyles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  }
})

在线解决该问题的答案似乎是使用普通对象而不是Stylesheet.create() 。 但是，当我这样做时，样式会完全混乱。

如何摆脱烦人的警告？

以上代码中../../style文件的内容：

style.js 

const $mainColor = '#EFEFEF'
export const styles = {
  list: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    borderRadius: 8
  },
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: $mainColor,
    flexDirection: 'column',
  },
  wideButton: {
    backgroundColor: '#FF3B3F',
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowRadius: 1,
    shadowOpacity: 1.0
  },
  label: {
    color: '#9E9E9E',
    fontWeight: '200'
  },
  formItem: {
    marginBottom: 10
  },
  icon: {
    width: 30
  },
  header: {
    backgroundColor: '#F7F7F7'
  },
  arrow: {
    color: '#9E9E9E'
  },
  modalView: {
    backgroundColor: '#FFFFFF',
    borderRadius: 8
  },
  modal: {
    height: 100
  },
  title: {
    color: '#9E9E9E',
    fontWeight: '200'
  },
}

3 个解决方案

解决方案1
 7  2017-07-29 11:41:14

我遇到了类似的问题，我才解决了！

我在ios应用程序中使用react-native-swiper，当我尝试设置<Swiper>样式时，遇到了与您相同的问题： 

Warning:Failed prop type: Invalid prop 'dotStyle' of type 'number' supplied to '_class', expected 'object';

这是我的代码：（您可以只关注<Swiper> Swiper <Swiper>及其dotStyle 

import React, { Component } from 'react'
import {
View,
Text,
StyleSheet,
Image,
} from 'react-native'

import Swiper from 'react-native-swiper'

const styles = StyleSheet.create({
bannerItem: {
    width:405,
    height:240,
},
dotStyle: {
    width:10,
    height:10,
    borderRadius:5,
},
activeDotStyle: {
    width:10,
    height:10,
    borderRadius:5,
},
});

和 

export default class Banner extends Component {
render() {
    return (
    <View>
        <Swiper style={styles.wrapper}
        autoplay={true}
        height={240} 
        activeDotColor="orange"
        dotStyle={styles.dotStyle}  //Warning happens here
        >
      <View>
        <Image style={styles.bannerItem} source={require('../img/carousel1.jpg')}/>
     </View>
      <View>
        <Image style={styles.bannerItem} source={require('../img/carousel3.jpg')}/>
       </View>
      <View>
        <Image style={styles.bannerItem} source=
{require('../img/carousel4.jpg')}/>
       </View>
      </Swiper>
      </View>
    )
  }
}

当我在<Swiper> Swiper <Swiper>写css object directle时，它使我震惊，它的工作原理是： 

dotStyle={{
    width:10,
    height:10,
    borderRadius:5,
}}

它将返回数字（styleId）而不是对象，就像警告描述的一样。

但是我不喜欢直接在jsx中写CSS对象，所以我使用flatten()

此方法使对象退回

这是文档：

StyleSheet.flatten（styles.listItem）; // return {flex：1，fontSize：16，color：'white'} //简单的styles.listItem将返回其ID（数字）

此方法在内部使用StyleSheetRegistry.getStyleByID（style）解析由ID表示的样式对象。

因此，将样式对象的数组（StyleSheet.create的实例）分别解析为它们各自的对象，合并为一个对象然后返回。

有关StyleSheet的官方文档（在底部）

所以我在jsx中这样重写

dotStyle={StyleSheet.flatten(styles.dotStyle)}

并且有效。

希望对你有帮助（￣▽￣）〜*

解决方案2
 1  2017-05-02 09:20:47

将名为style的prop传递给名为Container的组件。 容器要求prop样式是一个对象，但它已作为数字传递。

因此，只需尝试使用以下扁平化方法来提供适当的道具类型。 

StyleSheet.flatten(mapStyles.container)

让我知道是否有效。

解决方案3
 0  2017-05-02 09:14:56

使用NativeBase屏幕结构的常见方法是将所有组件包含在其中 

<Container>

像下面 

 <Container>
    <Header>
        <Left>
            <Button transparent>
                <Icon name='menu' />
            </Button>
        </Left>
        <Body>
            <Title>Header</Title>
        </Body>
        <Right />
    </Header>
    <Content>
        // Your main content goes here
    </Content>
    <Footer>
        <FooterTab>
            <Button full>
                <Text>Footer</Text>
            </Button>
        </FooterTab>
    </Footer>
</Container>

它不支持样式道具。 所以你得到警告。 请更新您的代码并删除容器组件中的样式属性。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 失败的道具类型：提供给“TextInput”的“对象”类型的道具“值”无效 %s 类型失败：%s%s，道具，提供给“图像”的无效道具“来源”，应为 [数字] 类型之一 开玩笑：道具类型失败：提供给“图像”的道具“来源”无效，应为 [数字] 类型之一 失败的道具类型：向“表”提供了“功能”类型的道具“ rowSelection”无效，预期是“对象” 道具类型失败：提供给“ForwardRef(DataGrid)”的“object”类型的无效道具“rows”，预期为“array” reactjs 失败的道具类型：提供给“ForwardRef（IconButton）”的“object”类型的无效道具“className”，应为“string” 道具类型失败：提供给“按钮”的对象类型无效的道具“标签”，应为“字符串” 道具类型失败：提供给“按钮”的“对象”类型的道具“ on​​Click”无效，预期是“功能” 警告：道具类型失败：提供给“提供者”的对象类型为“对象”的道具儿童无效，需要一个ReactElement 道具类型失败：提供给“Route”的“object”类型的无效道具“component”，预期为“function”
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM