はネイティブFlatListが

Question

新しいネイティブ反応するように反応するが、私は私のコンポーネントに小道具に渡され、その後、私は私のコンストラクタ

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"}, 
] 

の配列を持っています

<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は空白で表示されません。なぜリストが空白であるのかわかりません。

私が取得代わり状態データ= {this.props.list}を設定すると

エレメント・タイプが無効である：（用（内蔵部品の場合）予測文字列または>クラス/関数複合コンポーネント）が、未定義になっています。あなた>おそらくそれはで定義されていたファイルからコンポーネントをエクスポートするのを忘れた。

Answer 1

this.state.listとthis.props.listは異なっていてはいけません。少なくとも、あなたが提供したコードから読むことができます。

私が言うことができることである。

エレメントタイプが無効である：（内蔵部品のための）文字列または（複合コンポーネント用）>クラス/機能を期待したが得た：未定義。あなたが定義したファイルからコンポーネントをエクスポートするのを忘れている可能性があります。

「未定義」はタイプではありませんでした。 私の推測では、<ListItem .../>は未定義です。

リアクションネイティブには、組み込みのListItemタイプがありません。 react-native-elementsがありますが、そのListItemタイプを通常の<View />タイプのようにレンダリングできるかどうかはわかりません。 インポートと小道具の定義（もしあれば）を追加して、何が何であるかを確認できますか？

<ListItem .../>の代わりに<TouchableHighlight .../>を試してもエラーが解決するかどうか確認できますか？

Answer 2

これは、あなたがより多くのコードを共有する場合、我々はあなたに

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

をより良い例を与えることができ、フラットなリストにデータを表示する方法simpe例です。