Fatal编程技术网
  • javascript/
  • Javascript 失败的属性类型：为“Styled（Container）”提供的类型为“number”的属性“style”无效，应为“object”`

Javascript 失败的属性类型：为“Styled（Container）”提供的类型为“number”的属性“style”无效，应为“object”`

javascript html css reactjs react-native

Javascript 失败的属性类型：为“Styled（Container）”提供的类型为“number”的属性“style”无效，应为“object”`,javascript,html,css,reactjs,react-native,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 Conn

我刚刚收到这个警告，它正在填满我的控制台：

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

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'
  },
}
使用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>


标题
//你的主要内容在这里
页脚
而且它不支持样式道具。所以你得到了警告。
请更新代码并删除容器组件中的样式属性。

名为style的属性将传递给名为container的组件。 容器要求道具样式为对象，但其已作为编号传递

因此，只需尝试下面的展平方法，以提供适当的道具类型

StyleSheet.flatten(mapStyles.container)
让我知道它是否有效。

我遇到了类似的问题，我刚刚解决了它

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

Warning:Failed prop type: Invalid prop 'dotStyle' of type 'number' supplied to '_class', expected 'object';
下面是我的代码：（您可以只关注
及其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,
},
});
及

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

但我不喜欢直接在jsx中编写css对象，所以我使用
flatte（）

此方法可出租对象

以下是文件：

StyleSheet.flatte（styles.listItem）；//返回{flex:1，fontSize:16，颜色：'white'}//简单地说，styles.listItem将返回其ID（数字）

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

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

所以我在jsx中这样重写

dotStyle={StyleSheet.flant（styles.dotStyle）}

而且它起作用了

希望能有所帮助(￣▽￣)~*

您也可以发布您的样式化组件吗？@Shota我认为它已发布-导致此问题的
部分代码似乎未发布在此处。从警告消息中，您可以看到样式化组件正在执行“样式”的道具验证当你传递一个对象时，用数字表示它。@Shota它说它是由
SearchPage
创建的，所以我发布了整个
SearchPage
。这不是意味着问题在
SearchPage
中吗？@Shota
样式化（容器）
是作为
容器导入的，谢谢。我们如何设置容器的样式？我们不能？是不是可以改为设置容器内元素的样式？您只有应用样式的子组件而不是容器组件。“我们如何设置容器的样式？”…这里：容器不是真正的react组件，所以如果你想要自定义视图，那么你可以构建自定义主题。谢谢。它不起作用。但可能是因为我创建了
地图样式
，并且还导入了
样式
？@BenaminoBaggins我认为这不应该是个问题。我也从我发现的文档中尝试获取一些东西还有一件事，即使用StyleSheetRegistry.getStyleByID（style），其中style是数字格式的id。该方法在内部用于解析由id表示的样式对象。@Shahzad:我明白了。在这种情况下，解决@Beniaminobagkins问题的方法可能是直接删除
StyleSheet.create（obj）
然后只需执行
const style=obj
。在这两种情况下，您似乎已经找到了问题的原因。我建议您也将此解释添加到您的答案中。@ArneHugo使用普通对象而不是
样式表。create（）
会破坏样式设置。

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



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