Question

我是新手，对本地人有反应。我尝试向我的应用程序添加一个列表。我有一个像这样设计的数据数组：

   ["https://hi.com//image.png",  //uri
    "hello",
    "https://hi.com//image2.png",
    "welcome",      
    "https://hi.com//image3.png",
    "great",      
      ../..
   ]

问题是出现了我的图像，但右侧的文本实际上是我的uri字串。

我认为keyExtractor出了点问题：

renderItem =({item}) => {           
return(    
  <View style ={{flex:1, flexDirection:'row'}}>
    <Image source ={{uri: item}}/>
    <View style ={{flex:1, justifyContent: 'center'}}>
      <Text>{item}</Text>
    </View>
  </View>
  )
}

render() {  
return (
  <View style={styles.mainContainer}>
      <FlatList 
        data= {this.state.dataSource}              
        keyExtractor={(item,index) => index.toString()}
        renderItem= {this.renderItem}
        /> 
  </View>       
  );
}

Answer 1

您的renderItem函数遍历数组的每个元素，不确定其对您的数据的最佳选择，也许尝试使用类似的方法

const data = [{uri: 'https://link.io', text: 'hello'},{uri: 'http://anotherlink.co', text: 'bye'}]

然后在您的renderItem函数传递数据中：

    <Image source ={{uri: item.uri}}/>
    <Text>{item.text}</Text>

另一方面，如果您需要保持平面数组，则可以编写一个以2为下标的模的模数的函数，然后从那里得到结果，但不确定为什么除了codewars challange之外就需要？）祝您好运，希望对您有帮助

Answer 2

您的平面列表渲染项目正在尝试循环访问该项目。因此，每次循环时，您都将项目传递给Image并将项目传递给Text。正如@wijuwiju所建议的那样，这是实现它的最佳方法。维护数据密钥。然后，您的单位列表将正确呈现。

React Native：uri在列表中多次渲染

2 个答案: