如何在 React Native 中将反应导航堆栈 header 移动到屏幕底部？

Question

I want to show stack header in top for **mobile device** & in bottom of the screen for Tablet screen. So I tried to move header to bottom of the screen with bellow code. but no luck. Any pointer would be appreciated.

 <Stack.Screen name="addBusiness" component={BusinessScreen} options={{ title: 'My home', header: (navigationOptions) => ( <View style={{ position: 'relative', bottom: 0, height: 80, width: '100%', backgroundColor: '#dbdbdb', }} > <Text>HOME</Text> </View> ), }} />

Answer 1

You can do something like this:

import {isTablet} from 'react-native-device-info';
// ...

const headerStyles = () => {
  if (isTablet()) {
    return {
      header: () => (
        <View
          style={{
            position: 'absolute',
            top: Dimensions.get('window').height - 60,
            left: 0,
            right: 0,
            height: 60,
            borderWidth: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>HOME</Text>
        </View>
      ),
    };
  }
}

headerStyles can then be used like this:

options={{
  title: 'My home',
  ...headerStyles(),
}}

So you need to import Dimensions from react-native and isTablet from react-native-device-info .

---

This implementation uses the default react navigation header if the device is not a tablet. So if you also want to have a custom header on mobile you similarly need to return a header component in an else statement or after the if statement.