react-native-scrollable-tab-view不显示子页面的原因

最新推荐文章于 2020-04-20 13:44:27 发布

曾梦轩

最新推荐文章于 2020-04-20 13:44:27 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/u013751625/article/details/82623738

版权

最近新建的项目，使用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>

看第一句代码注释，就是这些了