Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
350 views
in Technique[技术] by (71.8m points)

android - React-Native Horizontal Scrollview not working but works well with vertical

I am new to react-native. I want to achieve a horizontal scrolling of list. When added horizontal the scrolls won't work. But it works well went removed horizontal={true}.
Below is the code.

       <View style={styles.headerMargin} >
           <ScrollView
            
            horizontal={true}
           style={{ marginLeft: 15, marginRight: 15 }}
            
            contentContainerStyle={{
              justifyContent:
                this.state.typeofCountry.length > 2
                  ? 'flex-start'
                  : 'center',
              width: '100%',}}
             >
                
            {this.state.typeofCountry.map((item, i) => {
              return (
              
                <View
                  style={{
                    flexDirection: 'row',
                    alignContent: 'center',
                    alignSelf: 'center',
                    alignItems: 'center',
                    
                  }}>
                  <Text
                    style={[
                      styles.textBlacRegular,
                      { marginLeft: i == 0 ? 0 : 10 },
                    ]}>
                    {item.label}
                  </Text>
                  <View style={{ justifyContent: 'center' }}>
                    <Image
                      style={{
                        width: 30,
                        height: 18,
                        marginLeft: 10,
                        marginRight:20,
                        justifyContent: 'center',
                        alignContent: 'center',
                        alignItems: 'center',
                      }}
                      source={item.icon}></Image>
                     
                  </View>
                  
                </View>
                
                
              );
            })}
            
          </ScrollView> 
         
          </View>
Styles:
headerMargin:{
   flexDirection:"row",
  width:'100%',
   marginTop:6,
   marginBottom:5,
   height:30,
     borderColor:"#2795FF",
   borderBottomWidth:1.5,
   alignSelf:"center",
   justifyContent:"center",
   alignItems:"center",
   alignContent:"center",
   paddingBottom:5
}

Can anyone let me know what wrong with the code. The above code works well in iOS but not in android.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Straight from React Native docs, for the scroll view's children to be arranged horizontally in a row instead of vertically in a column the only prop you need to use it's horizontal.

<ScrollView horizontal>
  <Child/>
</ScrollView>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...