失敗道具型：`number`提供給`花柱（集裝箱）`無效道具`style`，預計`object`

我剛開始這個警告這填補了我的控制檯：失敗道具型：`number`提供給`花柱（集裝箱）`無效道具`style`，預計`object`

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

來源

2017-05-02 BeniaminoBaggins

你可以發佈你的Styled組件嗎？ – Shota

@Shota我認爲它已發佈 - '' – BeniaminoBaggins

看起來像是導致此問題的代碼部分未在此處發佈。從警告消息中，您可以看到，當您傳遞一個對象時，Styled組件正在將「style」道具的道具驗證視爲一個數字。 – Shota

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

它不支持樣式道具。所以你會得到警告。請更新您的代碼並刪除容器組件中的樣式屬性。

來源

2017-05-02 09:14:56

謝謝。我們如何設計容器？我們不可以？解決方法是改變容器中的元素的樣式嗎？ – BeniaminoBaggins

您只應用樣式子組件而不是容器組件。 –

「我們如何設計容器？」這裏：[使用nativebase主題]（http://rawgit.com/GeekyAnts/native-base-docs/v2.2/_book/Customize.html#theaming-nb- headref） – ArchNoob

將prop命名的樣式傳遞給名爲Container的組件。容器需要道具樣式作爲對象，但它已作爲編號傳遞。

所以，只要嘗試下面的扁平方法來提供適當的道具類型。

StyleSheet.flatten(mapStyles.container)

讓我知道它是否工作。

來源

2017-05-02 09:20:47 Shahzad

謝謝。它沒有工作。但這可能是因爲我創建了'mapStyles'並且還導入了'styles'？ – BeniaminoBaggins

@BeniaminoBaggins我不認爲這應該是一個問題。 – ArneHugo

我試圖從文檔中獲取一些東西http://facebook.github.io/react-native/releases/0.43/docs/stylesheet.html#flatten 也從那裏我發現了一件事，即使用StyleSheetRegistry.getStyleByID（style ）其中style是數字格式的id。此方法在內部用於解析由ID表示的樣式對象。 – Shahzad

我得到了類似的問題，我剛解決它！

我現在用的反應，本機刷卡在我的iOS應用程序，當我試圖風格的<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> 
    ) 
    } 
}

它震撼了我，當我在寫CSS <Swiper>對象directle，它的工作：

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

它變回一個數字（styleId），而不是物體，就像什麼警告描述。

，但我不喜歡直接在JSX寫CSS對象，所以我用flatten()

這種方法renturns一個對象

這裏的文檔：

StyleSheet.flatten（樣式。項目清單）; //返回{flex：1，fontSize：16，顏色：'white'} // //只需styles.listItem將返回其ID（編號）

此方法內部使用StyleSheetRegistry.getStyleByID（style）來解析表示的樣式對象由ID。

因此，樣式對象（StyleSheet.create的實例）的數組被單獨解析爲它們各自的對象，併合併爲一個然後返回。

offical doc about StyleSheet(in the bottom)

，所以我重寫這樣的JSX

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

和它的工作。

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

來源

2017-07-29 11:41:14 flerming

失敗道具型：`number`提供給`花柱（集裝箱）`無效道具`style`，預計`object`

回答

相關問題