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.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…