滚动视图中的映射使水平列表在 React Native 中垂直

Question

其实我有两个疑问。我在我的应用程序中使用 ScrollView。当我像这样在滚动视图中提供静态图像时，列表显示水平：

<View>
  <View style={{width:width,paddingHorizontal:20,paddingVertical:20}}>
  <ScrollView 
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    scrollEventThrottle={200}
    decelerationRate="fast"
    pagingEnabled>
  <Image source={{uri:'https://reactjs.org/logo-og.png'}} 
        style={{width: 80, height: 80}} />
  <Image source={{uri:'https://reactjs.org/logo-og.png'}} 
        style={{width: 80, height: 80}} />
  <Image source={{uri:'https://reactjs.org/logo-og.png'}} 
        style={{width: 80, height: 80}} />
  <Image source={{uri:'https://reactjs.org/logo-og.png'}} 
        style={{width: 80, height: 80}} />
  </ScrollView>
 </View>
</View>

但是当我循环遍历数组时，它突然显示项目 vertically.Here 的滚动视图:

    list.map(function(item, i){
    return (
      <View key={i}>
      <View style={{width:width,paddingHorizontal:20,paddingVertical:20}}>
        <ScrollView 
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={200}
          decelerationRate="fast"
          pagingEnabled>
        <Image source={{uri: item}} 
              style={{width: 80, height: 80}} />
        </ScrollView>
      </View>
      </View>
        )
    })

我到底哪里错了？

Answer 1

试试这个方法

return (
  <ScrollView
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    scrollEventThrottle={200}
    decelerationRate="fast"
    pagingEnabled
  >
    <View>
      list.map(function(item, i)
      {
        <TouchableOpacity
          onPress={() => alert(item)}
          key={i}
          style={{ width: width, paddingHorizontal: 20, paddingVertical: 20 }}
        >
          <Image source={{ uri: item }} style={{ width: 80, height: 80 }} />
        </TouchableOpacity>
      }
      )
    </View>
  </ScrollView>
);

Answer 2

试试这个

       selectedImage=(item,index)=>{
          console.log(item,index,'Show Selected Image and Index')
          alert('Selection Index '+index)
        }
    
    
  //////////in Return 
         <View>
                  <View style=
                    {{width:width,paddingHorizontal:20,paddingVertical:20}}>
    <ScrollView 
      horizontal={true}
      showsHorizontalScrollIndicator={false}
       scrollEventThrottle={200}
        decelerationRate="fast"
     pagingEnabled>
             {list.map((item, i)=>( 
    <TouchableOpacity onPress={()=>this.selectedImage(item,i)}>
         <Image key={i} source={{uri: item}} style={{width: 80,height: 80}} />
         </TouchableOpacity> )
                     )}
            
                    </ScrollView>
              </View>
        </View>

滚动视图中的映射使水平列表在 React Native 中垂直

Maping in scrollview makes horizontal list vertical in React Native

javascript

scrollview

react-native