今天在做项目的时间遇到了一个问题:
我的底部菜单栏用的是react-native-scrollable-tab-view,上面用的是scrollview,android底部显示不全,ios正常:
如下图所示:
我的解决方案是:
在scrollview的内部子项目最后一项添加一个空的view设置一个高度:
<ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false} >
<Touchable url={'tel:18585025253'} title={'电话热线:18585025253'} />
<Touchable url={'mailto:674668211@qq.com'} title={'发送邮件:674668211@qq.com'} />
<Touchable url={'http://www.baidu.com'} title={'打开http网页'} />
<Touchable url={'https://www.baidu.com'} title={'打开https网页'} />
<Touchable url={'smsto:18585025253'} title={'发送短信'} />
<TouchableOpacity style={styles.quit}>
<Text style={{color:'red'}}>退出</Text>
</TouchableOpacity>
<View style={{height:Platform.OS == 'ios' ? 0:30,}}></View>
</ScrollView>
这样在android和ios上都能正常显示,出现的原因应该是
react-native-scrollable-tab-view的底部和上面的view之间的的布局出现了问题。