神坑react native之react-native-swiper组件导入react-navigation中不显示文字图片等内容的解决方案
开发环境:react native:0.51 , react-native-swiper:1.5.6 , react-navigation:1.0.0 beta27
APP主要架构使用的是react-navigation组件的TabNavigator实现底部tab切换,但是在首屏中引入封装好的 react-native-swiper模块,左右切换箭头和圆点指示器是有的,但里面的文字和图片就是不显示。
这是APP在初始渲染的时候,react-native-swiper和react-navigation有冲突导致的,解决思路是让react-native-swiper的render方法用定时器延迟一下,具体方法如下:
constructor(){ super(); this.state = { swiperShow:false, }; } componentDidMount(){ setTimeout(()=>{ this.setState({ swiperShow:true }); },0) } render(){ if(this.state.swiperShow){ return ( <Swiper style={styles.wrapper} height={200} showsButtons={true}> <View style={styles.slide1}> <Text style={styles.text}>Hello Swiper</Text> </View> <View style={styles.slide2}> <Text style={styles.text}>Beautiful</Text> </View> </Swiper> ) }else{ return <View></View> } }
注意,在render方法里判断的时候一定要加上else,否则会有如下红屏报错: