如何在React Native中将React导航堆栈标头移动到屏幕底部？

Question

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

         <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

您可以执行以下操作：

my_vals = np.random.choice(mean_max, size=(no_samples, len(mean_max)), replace=True)

然后可以像这样使用

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(), }} 导入Dimensions，并从react-native导入isTablet。

---

如果设备不是平板电脑，则此实现使用默认的react导航标题。因此，如果您还希望在移动设备上具有自定义标头，则同样需要在else语句中或if语句之后返回标头组件。