Question

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

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

Answer 1

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

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

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

这是我的代码:(你可以专注于<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>中编写css对象时，它让我感到震惊，它起作用了：

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（样式）来解析由ID表示的样式对象。

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

offical doc about StyleSheet(in the bottom)

所以我在jsx

中这样重写

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

它有效。

希望它可以帮助（¯▽¯）〜*

Answer 2

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

所以，试试下面的flatten方法来提供合适的道具类型。

StyleSheet.flatten(mapStyles.container)

让我知道它是否有效。

Answer 3

使用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>

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

失败的道具类型：提供给`Styled（Container）`的'number`类型的无效prop`style`，期望的`object`

3 个答案: