Javascript 水平滚动视图未滚动

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

我不确定是什么原因导致了这个问题，因为我知道正常的scrollview垂直运行良好，并且像正常一样滚动。我还尝试使用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',
  },
});

import React，{useState}来自“React”；
导入{可按、样式表、文本、视图、useWindowDimensions、Dimensions、图像、动画、PanResponder、，
TouchableOpacity、ScrollView、ImageBackground、Platform}来自“react native”；
从“react native elements”导入{SearchBar}；
进口{
规模
垂直尺度，
中等规模，
比例表，
}从“反应自然大小的问题”；
从“@expo/vector icons”导入{MaterialCommunityIcons}；
常量图像=[
{id:'1'，uri:require（'./assets/snack icon.png'），文本：'Test'}，
{id:'2'，uri:require（'./assets/snack icon.png'）/*文本：“Test”*/}，
{id:'3'，uri:require（'./assets/snack icon.png'）/*文本：“Test”*/}，
{id:'4'，uri:require（'./assets/snack icon.png'）/*文本：“Test”*/}，
]
恒定压力测试=（）=>{
让textlog=''；
const[state，setState]=useState（0）；
};
导出默认类Home扩展React.Component{
renderImagesHorizontal=（）=>{
返回Images.map（（项目，i）=>{
返回(
this.props.navigation.navigate（'VenueDetails'）}>
名称
类别
⬤
$$
⬤
★★★
);
});
};
renderImagesVertical=（）=>{
返回Images.map（（项目，i）=>{
返回(
this.props.navigation.navigate（'VenueDetails'）}>
名称
类别
⬤
$$
⬤
★★★
);
});
};
状态={
搜索：“”，
};
更新搜索=（搜索）=>{
this.setState（{search}）；
};
render（）{
const{search}=this.state；
返回(
{/*这可能会说一些不同的话，可能会有不同的看法，但你明白了
我也试图给它添加一个阴影，但没有弄清楚。*/}
家
}
clearIcon='null'
/>
{this.renderImagesHorizontal（）}
{this.renderImagesVertical（）}
);
}
}
const styles=ScaledSheet.create({
主演：{
颜色：'白色'，
字体大小：'20@s',
textShadowOffset:{宽度：2，高度：2}，
文本阴影半径：2，
textShadowColor:“#000”，
},
类别：{
颜色：'白色'，
字体大小：'20@s',
textShadowOffset:{宽度：2，高度：2}，
文本阴影半径：2，
textShadowColor:“#000”，
},
姓名：{
fontWeight:'粗体'，
颜色：'白色'，
字体大小：'25@s',
textShadowOffset:{宽度：2，高度：2}，
文本阴影半径：2，
textShadowColor:“#000”，
},
dot:{
颜色：'白色'，
字体大小：'5@s',
paddingLeft:'5@s',
paddingRight:'5@s',
textShadowOffset:{宽度：2，高度：2}，
文本阴影半径：2，
textShadowColor:“#000”，
},
金钱：{
颜色：'白色'，
字体大小：'20@s',
},
});

在android中，您必须添加

nestedScrollEnabled={true}

以启用android API级别21+的嵌套滚动。看

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

---

我也尝试过，它没有改变任何东西。我也在使用iphone。在renderImagesHorizontal中设置视图固定宽度而不是“150%”我更新我的答案你可以试试上面的小吃。