陣營本地FlatList

新反應母語，但我這是在道具傳遞給我的組件，然後我把它放在狀態在我的構造陣營本地FlatList

constructor(props){ 
    super(props) 
    this.state = { 
     portraitImage: 'initalImageLink', 
     isModalVisible: false, 
     list: this.props.list, 
    }; 


}

I數據

list = [ 
{key: "image1", imgLink: "imagelink"}, 
{key: "image2", imgLink: "imagelink"}, 
{key: "image3", imgLink: "imagelink"}, 
{key: "image3", imgLink: "imagelink"}, 
]

數組也有一個模式內的FlatList：

<Modal isVisible={this.state.isModalVisible} onBackdropPress = {this._hideModal}> 
    <View style={{ flex: 1, backgroundColor:'#FFFFFF'}}> 
     <FlatList 
      data={this.state.list} 
      renderItem={ 
       ({item}) => <ListItem onPress = {this._setImg.bind(this,item.imgLink)} title={item.key} /> 
      } 
     /> 

     <Button title = {'Close Modal'} onPress={this._hideModal}/>  
    </View> 
</Modal> 


_setImage(value){ 
    this.setState({ 
     portraitImage: value 
    }); 
};

我想只顯示鍵名稱列表（image1，image2，image3 ，image4），然後當用戶按下其中一個鍵名時，它將改變portraitImage狀態。

這就是我現在的情況，但我的FlatList似乎是空白的，什麼也沒有顯示。我不明白爲什麼這個列表是空白的。

在i設定數據= {this.props.list}代替狀態I得到

元類型無效：預期的字符串（用於內置組件）或>類/功能（複合組件），但得到：未定義。你>可能忘了您的組件從它的定義文件導出。

來源

2017-08-29 user3074140

它沒有任何意義，因爲this.state.list和this.props.list不應該有所不同。至少這是我可以從你提供的代碼中讀取的。

我可以說的是：

元素類型無效：預期字符串（內置組件）或>類/功能（複合組件），但得到：不確定。您可能忘記從您定義的文件中導出您的組件。

它說'未定義'被用作類型，它不是！我的猜測是<ListItem .../>未定義。

React-native沒有內置的ListItem類型。 react-native-elements呢，但我不確定它們的ListItem類型是否可以像正常<View />類型那樣呈現。您可以添加您的導入和道具定義（如果有），以便我們可以看到什麼是什麼？

您可以試試<TouchableHighlight .../>而不是<ListItem .../>來檢查錯誤是否持續？

來源

2017-09-05 09:14:33 DerpyNerd

是的，你是對的我沒有進口的Listitem組件，我應該提到我發現 – user3074140

很高興它是一些事情，你從來沒有現在有多複雜，它可以在這個階段在反應原生:) – DerpyNerd

這是一個simpe例如如何顯示在平面列表數據，如果您分享更多的代碼，我們可以給你更好的例子

constructor(props) { 
super(props) 
this.state = { 
    list: [] 
}; 
} 

getList =() => { 
const li = [ 
    { key: "image1", imgLink: "imagelink" }, 
    { key: "image2", imgLink: "imagelink" }, 
    { key: "image3", imgLink: "imagelink" }, 
    { key: "image3", imgLink: "imagelink" }, 
] 

this.setState({ 
    list: li 
}) 
} 

componentWillMount() { 
this.getList() 
} 

render() { 
return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}> 
    <FlatList 
     data={this.state.list} 
     renderItem={({ item }) => <Text>{item.key}</Text>} 
    /> 
    </View>); 
} 
}

來源

2017-08-30 04:37:38

陣營本地FlatList

回答

相關問題