简体   繁体   中英

Scrollview in react native not scrolling

Hello guys hope u doing good ! i wanna know why Scrollview isnt working over here ? i imported it from react-native so it should be working ? 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 !

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

Link to live example - https://snack.expo.dev/ngXxvwgx7

Live horisontal example - https://snack.expo.dev/Tc0ScUOR1

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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