如何在 React Native 中将 React Navigation Stack header 移动到屏幕底部？

Question

我想在 **移动设备** 的顶部显示堆栈 header ，在平板电脑屏幕的屏幕底部显示堆栈 header 。所以我尝试使用下面的代码将 header 移动到屏幕底部。但没有运气。任何指针将不胜感激。

         <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

你可以这样做：

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 可以这样使用：

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

因此您需要从 react-native 导入 Dimensions 并从 react-native-device-info 导入 isTablet。

---

如果设备不是平板电脑，此实现将使用默认的 React 导航 header。因此，如果您还想在移动设备上使用自定义 header，您同样需要在 else 语句中或 if 语句之后 return 一个 header 组件。