react-native-scrollable-tab-view不顯示子頁面的原因
阿新 • • 發佈:2018-12-09
最近新建的專案,使用react-native-scrollable-tab-view子介面不顯示,查了一下原因是由於react-native-scrollable-tab-view必須在彈性容器裡面才會展開,否則就會不顯示子介面
<View style={{flex:1}}> //這裡一定要設定為flex屬性,內部的react-native-scrollable-tab-view才會展開顯示 <View style={{width:SCREEN_W,height:IS_X?88:64,backgroundColor:'rgba(255,255,255,1)',flexDirection:'row'}}> <View style={{alignItems:'center',justifyContent:'center',width:SCREEN_W-60}}> <View style={{ width:SCREEN_W-80, height:30, marginTop:IS_X?48:4, borderRadius:5, backgroundColor:'rgba(247,247,247,1)', flexDirection:'row', alignItems:'center', justifyContent:'center'}}> <Image/> <Text style={{color:'rgba(218,220,234,1)',fontSize:14}}>請輸入數字貨幣名進行查詢</Text> </View> </View> <TouchableOpacity style={{marginTop:49,width:40,height:40,justifyContent:'center',alignItems:'center'}} onPress={()=>{ }}> <Text>提問</Text> </TouchableOpacity> </View> <ScrollableTabView tabBarUnderlineStyle={{backgroundColor: 'rgba(44,107,230,1)',width:64,height:2,marginHorizontal:(SCREEN_W-192)/6}} tabBarActiveTextColor={"rgba(64,71,96,1)"} tabBarInactiveTextColor={"rgba(64,71,96,1)"} renderTabBar={() => <DefaultTabBar/>} style={{width:SCREEN_W,height:SCREEN_H,backgroundColor:'#fff'}}> <Find tabLabel={'風評中心'} navigation={navigation}/> <RiskAssessCenter tabLabel={'發現'} navigation={navigation}/> <RiskAssessCenter tabLabel={'情報中心'} navigation={navigation}/> </ScrollableTabView> </View>
看第一句程式碼註釋,就是這些了