1. 程式人生 > >react-native-scrollable-tab-view不顯示子頁面的原因

react-native-scrollable-tab-view不顯示子頁面的原因

最近新建的專案,使用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>

看第一句程式碼註釋,就是這些了