Блог

Главная - Вопросы по программированию - Отображение в scrollview делает горизонтальный список вертикальным в React Native

Отображение в scrollview делает горизонтальный список вертикальным в React Native

#javascript #react-native #scrollview

#javascript #react-native #scrollview

Вопрос:

На самом деле у меня есть два запроса. Я использую ScrollView в своем приложении. Список отображается по горизонтали, когда я даю статические изображения в 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>

Но когда я перебираю массив, он внезапно показывает элементы по вертикали.Вот scrollview :

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

Где именно я ошибаюсь?

Комментарии:

1. Попробуйте придать стиль полной ширины самому внешнему элементу представления

2. Нет, он по-прежнему делает то же самое @warl0ck

Ответ №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>
);

Ответ №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>

Комментарии:

1. Работает отлично. Спасибо, но если я хочу выбрать определенный элемент из элементов scrollview, как мне это сделать, не могли бы вы рассказать?

2. Конечно, я обновлю свой ответ, пожалуйста, проверьте 🙂 спасибо