反应本机响应标题高度

我试图设置我的标题高度，以便它响应平板电脑和智能手机。我已经使用柔性柱尝试：反应本机响应标题高度

const headerStyle = { 
    paddingHorizontal: theme.metrics.mainPadding, 
    paddingTop: 0, 
    paddingBottom: 0, 
    backgroundColor: theme.colors.blue, 
    flex: 0.5, 
    flexDirection: 'column', 
};

然而，头看起来不错的平板电脑，但在智能手机上太高。

什么是为不同设备设置尺寸的最佳方式？

编辑：

我有这样的功能：

export function em(value: number) { 
    return unit * value; 
}

，现在我用它在我的样式表：

headerHeight: em(6), 
    headerImageWidth: em(3), 
    headerImageHeight: em(3), 
    headerLogoHeight: em(6), 
    headerLogoWidth: em(20),

图像看起来平板电脑好，但现在智能手机太小了。如果我理解正确，我需要使用dimensions.width在我的函数中设置适当的单位值？

智能手机

平板

来源

2017-08-02 Bomber

你会必须使用'react-native'中的'Dimensions'模块并在运行时修改样式。回应原生反应。这是一个很好的阅读：https://medium.com/@elieslama/responsive-design-in-react-native-876ea9cd72a8 – MaieonBrix

我能想到的两种方式

使用Flex

<View style={{flex:1}}> 
    <View style={{flex:0.2}}> 
    <Text>Header</Text> 
    </View> 

    <View style={{flex:0.8}} /> 

</View>

你使用Flex提及，但没有工作。我不确定你是否像上面一样使用它，大小应该是相对于屏幕大小。

使用尺寸

如何使用Dimensions模块。它可以用来获取width和窗口的height，你可以基于

import { 
    Dimensions 
} from 'react-native 
const winWidth = Dimensions.get('window').width; 
const winHeight = Dimensions.get('window').height; 


header = { 
    height: winHeight * 0.2 // 20% 
}

然后用宽度和高度来设置标题的高度设定高度（例如，基于百分比）

来源

2017-08-02 14:15:54

反应本机响应标题高度

回答

相关问题