admin管理员组文章数量:1278984
I'm just getting this warning which is filling up my console:
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
Here is the code in question:
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',
}
})
The answers to this question online seem to be to use a plain object rather than Stylesheet.create(). However, the styling gets pletely messed up when I do so.
How do I get rid of the annoying warning?
contents of ../../style file from above code:
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'
},
}
I'm just getting this warning which is filling up my console:
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
Here is the code in question:
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',
}
})
The answers to this question online seem to be to use a plain object rather than Stylesheet.create(). However, the styling gets pletely messed up when I do so.
How do I get rid of the annoying warning?
contents of ../../style file from above code:
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'
},
}
- Could you post your Styled ponent too? – Shota Commented May 2, 2017 at 7:33
-
@Shota I think it is posted - the
<Container style={mapStyles.container}>– BeniaminoBaggins Commented May 2, 2017 at 7:34 - Looks like the part of code that causes this issue is not posted here. From warning message, you can see that Styled ponent is doing prop validation of "style" prop as a number, while you are passing an object. – Shota Commented May 2, 2017 at 7:39
-
@Shota it says it is created by
SearchPage, so I posted the wholeSearchPage. Doesn't it mean the issue is inSearchPage? – BeniaminoBaggins Commented May 2, 2017 at 7:44 -
1
@Shota
Styled(Container)is imported asContainerfrom native-base's Container.js – ArneHugo Commented May 2, 2017 at 9:18
3 Answers
Reset to default 8I got the similar problem and i just solved it!
I am using the react-native-swiper in my ios app and when i tried to style the <Swiper>, i got the same problem as you are:
Warning:Failed prop type: Invalid prop 'dotStyle' of type 'number' supplied to '_class', expected 'object';
here is my code: (you can just focus on the <Swiper> and its 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,
},
});
And
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>
)
}
}
And it shocked me when i write css object directle in <Swiper>, it work:
dotStyle={{
width:10,
height:10,
borderRadius:5,
}}
it turns back a number (styleId) instead of a object, just like what the warning describe.
but i don't like write css object directly in jsx, so i use flatten()
this method renturns a object
here's the docs:
StyleSheet.flatten(styles.listItem); // return { flex: 1, fontSize: 16, color: 'white' } // Simply styles.listItem would return its ID (number)
This method internally uses StyleSheetRegistry.getStyleByID(style) to resolve style objects represented by IDs.
Thus, an array of style objects (instances of StyleSheet.create), are individually resolved to, their respective objects, merged as one and then returned.
offical doc about StyleSheet(in the bottom)
so i rewrite like this in jsx
dotStyle={StyleSheet.flatten(styles.dotStyle)}
and it work.
hope it can help(￣▽￣)~*
prop named style is passed to a ponent named Container. Container requires prop style to be an object but its been passed as number.
So just try the below flatten method to provide appropriate prop type.
StyleSheet.flatten(mapStyles.container)
let me know if it worked.
A mon way to use NativeBase screen structure is to have all the ponents within
<Container>
like below.
<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>
and it won't support style prop. so you are getting warning. please update your code and remove style attribute in container ponent.
本文标签：
版权声明：本文标题：javascript - Failed prop type: Invalid prop `style` of type `number` supplied to `Styled(Container)`, expected `object` - Stack 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741297771a2370915.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论