Javascript 反应本机选项卡视图:如果嵌套在平面列表中,如何调整场景?
我的代码中有一个平面列表,在页脚中有一个选项卡视图。此选项卡视图渲染具有flex:1样式的场景 问题是,如果我加载应用程序并看到结果,则选项卡场景的宽度和高度无法覆盖自由布局 单位代码Javascript 反应本机选项卡视图:如果嵌套在平面列表中,如何调整场景?,javascript,css,reactjs,react-native,flexbox,Javascript,Css,Reactjs,React Native,Flexbox,我的代码中有一个平面列表,在页脚中有一个选项卡视图。此选项卡视图渲染具有flex:1样式的场景 问题是,如果我加载应用程序并看到结果,则选项卡场景的宽度和高度无法覆盖自由布局 单位代码 constrenderheader=()=>( {/* ( {/* ); 返回( ); } const styles=StyleSheet.create({ 场景:{ 弹性:1// const renderHeader = () => ( <View style={{width: &quo
constrenderheader=()=>(
{/* (
{/*
);
返回(
);
}
const styles=StyleSheet.create({
场景:{
弹性:1//
const renderHeader = () => (
<View style={{width: "100%", height: 350}}> {/* <--------------- */}
<Header
uploadProgress={uploadProgress}
onConfigurationButtonPress={handleConfigurationDisplay}
/>
</View>
);
const renderFooter = () => (
<View style={{ flex: 1 }}> {/* <--------------- */}
<Tab /> {/* <------ */}
</View>
);
<View style={[styles.container, { backgroundColor: colors.white }]}> {/* styles.container is just flex: 1 */}
<FlatList
ref={scrollRef}
refreshControl={...}
ListHeaderComponent={renderHeader()}
ListFooterComponent={renderFooter()}
/>
<Modal
animationType="slide"
visible={isConfigurationVisible}
onRequestClose={handleConfigurationDisplay}
hardwareAccelerated
statusBarTranslucent
transparent
>
<View
style={[styles.modalView, { backgroundColor: colors.white }]}
>
{/*TODO*/}
</View>
</Modal>
</View>
...
const FirstRoute = () => <View style={styles.scene} />; // <------------ It has flex: 1...
const SecondRoute = () => <View style={styles.scene} />; // <------------ It has flex: 1...
const renderScene = SceneMap({
posts: FirstRoute,
tags: SecondRoute,
});
const renderTabBar = (props) => (
<TabBar
{...props}
indicatorStyle={{ backgroundColor: colors.primary }}
style={[
styles.tab,
{
backgroundColor: colors.white,
colors: colors.black,
},
]}
renderLabel={({ route, focused }) => (
<Text
style={[
styles.text,
{
color: focused ? colors.primary : colors.black,
},
]}
>
{route.title}
</Text>
)}
/>
);
return (
<TabView
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
const styles = StyleSheet.create({
scene: {
flex: 1, // <------------------------
backgroundColor: "red",
},
tab: {
elevation: 0,
},
text: {
marginVertical: 8,
},
});