我正在开发导航抽屉:
<Drawer.Navigator
initialRouteName={InitialScreen}
drawerContent={props => <MyDrawer {...props} />}
screenOptions={{
headerShown: true,
}}>
<Drawer.Screen name="main" component={MainScreen} />
</Drawer.Navigator>
正如您在上面看到的,我正在通过实现自己的MyDrawer
组件来自定义抽屉的内容。
在 的渲染部分MyDrawer
,我有:
return (
<View style={styles.myContent}>
<DrawerContentScrollView
style={{flex: 1, top: 0, bottom: 0, backgroundColor: 'yellow'}}
{...props}>
<View
style={{
backgroundColor: 'green',
flex: 1,
width: '100%',
height: '100%',
}}>
<View>
<DrawerItem name="Purhcase" text="Purchase" />
<DrawerItem name="Sell" text="Sell" />
</View>
...
</View>
</DrawerContentScrollView>
</View>
);
const styles = StyleSheet.create({
myContent: {
flex: 1,
paddingLeft: 0,
paddingTop: 10,
}
});
我想要通过填充整个高度来View
直接包裹的绿色组件。上面的代码显示了我尝试过的内容,但无论我做什么,那个绿色的 View 组件总是只根据它包装的内容占据高度。那么如何让它填满整个高度呢?DrawerContentScrollView
DrawerContentScrollView