Question

将水平={true} 添加到我的滚动视图时，我认为这足以横向滚动。出于某种原因，即使有足够的内容可以滚动，图像也不会连续滚动。如果您将此代码复制并粘贴到snack.expo.io 中，您就会明白我的意思。

我不确定是什么导致了这个问题，因为我知道正常的滚动视图垂直工作正常并且滚动正常。我也试过使用nestedScrollenabled 为true

任何见解都比您所知道的更受赞赏！

import React, { useState } from 'react';
import {Pressable, StyleSheet, Text, View, useWindowDimensions, Dimensions, Image, Animated, PanResponder, 
        TouchableOpacity, ScrollView, ImageBackground, Platform} from 'react-native';
import { SearchBar } from 'react-native-elements';


import {
  scale,
  verticalScale,
  moderateScale,
  ScaledSheet,
} from 'react-native-size-matters';

import { MaterialCommunityIcons } from '@expo/vector-icons';

const Images = [
  { id: '1', uri: require('./assets/snack-icon.png'), text: 'Test' },
  { id: '2', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
  { id: '3', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
  { id: '4', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
]

const pressableTest = () => {
  let textlog = '';
  const [state, setState] = useState(0);
};

export default class Home extends React.Component {
  renderImagesHorizontal = () => {
    return Images.map((item, i) => {
      return (
        <View
          style={{
            width : '150%',
            paddingLeft: scale(10),
            paddingRight: scale(10),
            paddingBottom: scale(15),
          }}>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('VenueDetails')}>
            <ImageBackground
              source={item.uri}
              style={{
                width: '100%',
                height: scale(225),
                shadowColor: '#000',
                shadowOffset: { width: 1, height: 4 },
                shadowOpacity: 1,
              }}
              imageStyle={{ borderRadius: 10 }}>
              <View
                style={{
                  position: 'absolute',
                  bottom: 10,
                  left: 10,
                  justifyContent: 'flex-start',
                  alignItems: 'flex-start',
                }}>
                <Text style={styles.name}>Name</Text>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <Text style={styles.category}>Category</Text>
                  <Text style={styles.dot}>⬤</Text>
                  <Text style={styles.money}>$$</Text>
                  <Text style={styles.dot}>⬤</Text>
                  <Text style={styles.starRating}>★★★</Text>
                </View>
              </View>
            </ImageBackground>
          </TouchableOpacity>
        </View>
      );
    });
  };

renderImagesVertical = () => {
    return Images.map((item, i) => {
      return (
        <View style={{ paddingLeft: scale(10), paddingRight: scale(10), paddingBottom: scale(20) }}>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('VenueDetails')}>
            <ImageBackground
              source={item.uri}
              style={{ width:'100%', height: scale(125), 
              shadowColor: '#000',
              shadowOffset: {width: 1, height: 7},
              shadowOpacity: 1,}} imageStyle = {{ borderRadius: 20}}>
              
              <View
                style={{
                  position: 'absolute',
                  bottom: 10,
                  left: 10,
                  justifyContent: 'flex-start',
                  alignItems: 'flex-start',
                }}>
                <Text style={styles.name}>Name</Text>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <Text style={styles.category}>Category</Text>
                  <Text style={styles.dot}>⬤</Text>
                  <Text style={styles.money}>$$</Text>
                  <Text style={styles.dot}>⬤</Text>
                  <Text style={styles.starRating}>★★★</Text>
                </View>
              </View>
            </ImageBackground>
          </TouchableOpacity>
        </View>
      );
    });
  };

  
  
  state = {
    search: '',
  };

  updateSearch = (search) => {
    this.setState({ search });
  };

  render() {

    const { search } = this.state;

    return (
      <ScrollView style={{ flex: 1, backgroundColor: '#272933', horizontal: 'true' }}>
      
       <View style={{flexDirection:'row', marginTop: scale(20)}}>
      {/*this will proabbly say somethign different and probably have a different look to it but you get the idea
        I was also trying to add a shadow to this but couldnt figure it out. */}
        <Text style={{marginTop: scale(30) ,fontSize: scale(40), fontWeight: 'bold', color: '#FFFFFF', paddingLeft: scale(20)}}>
            Home
        </Text>
        <View style={{paddingTop: scale(40), paddingLeft: scale(155)}}>

        </View>
      </View>

      <SearchBar
        placeholder="Search..."
        onChangeText={this.updateSearch}
        value={search}
        round='true'
        containerStyle={{backgroundColor: '#272933', borderBottomColor: 'transparent', borderTopColor: 'transparent', 
        paddingLeft: scale(20) , paddingRight: scale(20)}}
        inputContainerStyle={{height: scale(30),  width: scale(310), backgroundColor: '#3A3B3C'}}
        searchIcon={() => <MaterialCommunityIcons name="glass-mug-variant" size={25} color='#87909A'/>}
        clearIcon= 'null'
      />
     
      
       <ScrollView
       horizontal={true}
>
        <View style={{ flex: 1, flexDirection : 'row', marginTop: 15 }}>{this.renderImagesHorizontal()}</View>
      </ScrollView>  

      <View style={{ flex: 1, marginTop: 15 }}>{this.renderImagesVertical()}</View>
     
      </ScrollView>
    );
  }
}

const styles = ScaledSheet.create({
  starRating: {
    color: 'white',
    fontSize: '20@s',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 2,
    textShadowColor: '#000',
  },

  category: {
    color: 'white',
    fontSize: '20@s',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 2,
    textShadowColor: '#000',
  },
  name: {
    fontWeight: 'bold',
    color: 'white',
    fontSize: '25@s',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 2,
    textShadowColor: '#000',
  },
  dot: {
    color: 'white',
    fontSize: '5@s',
    paddingLeft: '5@s',
    paddingRight: '5@s',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 2,
    textShadowColor: '#000',
  },
  money: {
    color: 'white',
    fontSize: '20@s',
  },
});

Answer 1

在 android 中，您必须添加 nestedScrollEnabled={true} 以启用 Android API 级别 21+ 的嵌套滚动。见here

<ScrollView> 
         
   <ScrollView nestedScrollEnabled={true}>
            
   </ScrollView> 

</ScrollView>

尝试零食 here（在 android 和 ios 中测试，而不是在 web 中测试）

水平 ScrollView 不滚动

1 个答案: