React Navigation 修改高度及字体大小
2020-02-24 01:48:04
在android手机上高度看着有点高,修改一下高度。

代码如下:

import React from 'react';
import { createStackNavigator, StackHeaderInterpolationProps, CardStyleInterpolators, HeaderStyleInterpolators, TransitionPresets } from '@react-navigation/stack';
import { Button } from 'react-native';

import HomePage from '../pages/HomePage';
import Page1 from '../pages/Page1';
import Page2 from '../pages/Page2';
import Page3 from '../pages/Page3';
import Page4 from '../pages/Page4';
import Page5 from '../pages/Page5';
import Login from '../pages/Login';

const Stack = createStackNavigator();
export const AppStackNavigation = () => {
return (
<Stack.Navigator initialRouteName="HomePage" headerMode="screen" screenOptions={{ headerTitleAlign: 'center', headerStyle: { height: 35 }, headerTitleStyle: { fontSize: 16 } }}>
<Stack.Screen name="HomePage" component={HomePage} options={{ title: '首页' }} />
<Stack.Screen name="Page1" component={Page1} />
<Stack.Screen name="Page2" component={Page2} options={{ headerTitleAlign: 'left', AllowFontScaling: true, headerBackTitle: '返回', cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, }} />
<Stack.Screen name="Page3" component={Page3} options={
   (args) => {
const { navigation, route } = args;
const { setParams } = navigation;
const { params } = route || {};
const { title = '第三页面', mode } = params || {};
return {
    title, headerTitleAlign: 'center',
      headerRight: () => (<Button title={mode === 'edit' ? '保存' : '编辑'} onPress={() => setParams({ mode: mode === 'edit' ? '' : 'edit' })} />),
     };
   }} />
<Stack.Screen name="Page4" component={Page4} options={{ ...TransitionPresets.ModalSlideFromBottomIOS }} />
<Stack.Screen name="Page5" component={Page5} options={{ ...TransitionPresets.SlideFromRightIOS }} />
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator >
);

}
};

主要的参数还是

screenOptions={{ headerTitleAlign: 'center', headerStyle: { height: 35 }, headerTitleStyle: { fontSize: 16 } }}

headerStyle:{

height: 35 , // 高度修改

},

headerTitleStyle:{

fontSize: 16, // 字体大小

}

CopyRight By Xiaotuni 2020 赣ICP备20000141号-1 xiaotuni@gmail.com