Javascript flexDirection正在导致图像消失

所以我让我的图像一个接一个地显示出来，就像我希望的那样。我希望它们水平显示，而不是垂直显示。最初，我尝试使用flexDirection:“行”，然后将scrollview设置为水平以实现这一点，但flexDirection似乎使图像一起消失

我把flexDirection放在第60行的视图中。我还尝试创建另一个父视图来保持flexDirection，但这给了我相同的结果

请复制并粘贴到snack.expo.io以查看我所指的内容

感谢您的任何见解

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 screenResolutions = () => {
  var SCREEN_HEIGHT = useWindowDimensions().width;
  var SCREEN_WIDTH = useWindowDimensions().height;
};

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 {
  renderImages = () => {
    return images.map((item, i) => {
      return (
        <View
          style={{
            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>
      );
    });
  };

  state = {
    search: '',
  };

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

  render() {
    const { search } = this.state;

    return (
      <ScrollView
        style={{ flex: 1, backgroundColor: '#272933', horizontal: 'true' }}>
        <View style={{ flex: 1, marginTop: 15 }}>{this.renderImages()}</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”；
进口{
可按，
样式表，
文本，
看法
使用窗口尺寸，
尺寸，
形象,，
有生气的
应答器，
可触摸不透明度，
滚动视图，
图像背景，
平台，
}从“反应本机”；
从“react native elements”导入{SearchBar}；
进口{
规模
垂直尺度，
中等规模，
比例表，
}从“反应自然大小的问题”；
从“@expo/vector icons”导入{MaterialCommunityIcons}；
常量屏幕分辨率=（）=>{
var SCREEN_HEIGHT=useWindowDimensions（）.宽度；
var SCREEN_WIDTH=useWindowDimensions（）.高度；
};
常量图像=[
{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{
渲染=（）=>{
返回images.map（（项目，i）=>{
返回(
this.props.navigation.navigate（'VenueDetails'）}>
名称
类别
⬤
$$
⬤
★★★
);
});
};
状态={
搜索：“”，
};
更新搜索=（搜索）=>{
this.setState（{search}）；
};
render（）{
const{search}=this.state；
返回(
{this.renderImages（）}
);
}
}
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',
},
});

我不使用react，但是您的图像视图（从渲染图像返回的视图）应该具有宽度或flex basis属性，并且您的容器（scrollview>视图）应该具有display:flex和宽度100vw

我做到了：

编辑：我改为“不换行”和“固定宽度”，而不是“基准”，使其水平滚动

---

若一个容器被设置为100%flex no wrap，并且它的子容器有一个固定的宽度，它们将在web中水平溢出，我们只需将溢出-x:scroll；使其可滚动并查看所有溢出的项目。

将horizonal={true}添加到scrollview时，它似乎被锁定，无法连续滚动。有人知道为什么这是偶然的吗？还有给我一个100%宽度的scrollview的目的是什么？我从来没有用过。如果一个scroll view是一个水平滚动的容器，那么它需要一个100%的宽度，但是是一个overflow-y:scroll；柔性包装：无包装；孩子们需要有一个固定的宽度，无包装将适合一行上的项目，因为他们有固定的宽度，他们不会收缩，因此溢出将让项目溢出，在您的情况下，更改为无包装包装，并确保有可能溢出键入：溢出-x**

.flex-box {
 width : 100vw ; // or %
 display : flex ;
 overflow-x : scroll ;
 flex-wrap : no-wrap ;
}
.flex-item {
 width : 200px ; // or % or flex-basis with no shrink or min-width
}