简体   繁体   English

反应原生中的滚动视图不滚动

[英]Scrollview in react native not scrolling

Hello guys hope u doing good !大家好,希望你们做得好! i wanna know why Scrollview isnt working over here ?我想知道为什么 Scrollview 在这里不起作用? i imported it from react-native so it should be working ?我从 react-native 导入它,所以它应该可以工作? i have seen some solution that say you have to add flex style to it but i did it and the stories component disappeared from the app !我见过一些解决方案,说你必须向它添加 flex 样式,但我做到了,故事组件从应用程序中消失了!

import { StyleSheet, Image,Text, View, ScrollView } from 'react-native';
import  USERS from '../../data/storiesDummy';

const Stories=()=>{
    return(
        
       <View style={{marginBottom:13 }}>
           <ScrollView horizontal showsHorizontalScrollIndicator={false}  > 
           {USERS.map((story,index)=>(
               <View key={index} style={{alignItems:'center'}}>
                 <Image source={{uri: story.image}}
                 style={styles.stories}/>
                 <Text style={{color:'white'}}>{
                     story.user.length > 10 ? story.user.slice(0,10).toLowerCase()+'...'
                    : story.user.toLowerCase() }    
                </Text>
               </View>
           ))}
           </ScrollView>

         
       </View>
    );
}
const styles =StyleSheet.create({
  stories:{
      width:70,
      height:70,
      borderRadius:50,
      marginLeft:6,
      borderWidth:3,
      borderColor:'#ff8501',
  }
})

export default Stories;```

For vertical scroll remove horizontal and showsHorizontalScrollIndicator from ScrollView对于垂直滚动,从 ScrollView 中删除水平和显示水平滚动指示器

Link to live example - https://snack.expo.dev/ngXxvwgx7链接到现场示例 - https://snack.expo.dev/ngXxvwgx7

Live horisontal example - https://snack.expo.dev/Tc0ScUOR1现场水平示例 - https://snack.expo.dev/Tc0ScUOR1

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM