react-native - 字体大小在反应原生的不同设备中缩小(不响应)
问题描述
我实际上是新手,通常会做出原生反应,所以我的字体大小肯定有问题,我编写了这段代码并在 5.5 英寸的屏幕上查看,它看起来有点不错,但是当在更大的设备上运行代码时,字体收缩,这是相当重要的。
我已经尝试过react-native-responsive-fontsize
,但它不起作用
下面是我的代码:
<SafeAreaView style={styles.container}>
<View
style={{
flex: 0.94,
justifyContent: 'center',
flexDirection: 'row',
}}>
<TouchableOpacity
style={{
flex: 0.95,
backgroundColor: 'white',
borderRadius: 15,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.36,
shadowRadius: 6.68,
elevation: 11,
}}>
<View
style={{
flex: 0.16,
justifyContent: 'flex-end',
}}>
<Text
style={{
textAlign: 'center',
fontSize: 28,
fontWeight: 'bold',
color: '#569499',
}}>
Let's practice it.
</Text>
</View>
<View
style={{
flex: 0.6,
flexDirection: 'row',
justifyContent: 'center',
}}>
<View
style={{
flex: 0.95,
justifyContent: 'space-evenly',
}}>
<View style={{flex:0.3,}}>
<Text style={{fontSize:16,textAlign:'center'}}>In this game, you will see letters appear one at a time on screen.</Text>
</View>
<View style={{flex:0.3}}>
<Text
style={{
fontSize: 16,
color: 'black',
textAlign: 'center',
}}>
Tap the screen for every letter except
<Text
style={{
fontWeight:'bold',
fontSize: 16,
color: '#39888e',
textAlign: 'center',
}}>
{' '}
X
</Text>. Press as quickly and correctly as you can.
</Text>
</View>
</View>
</View>
<View
style={{
flex: 0.25,
justifyContent: 'center',
}}>
<View
style={{
flex: 0.45,
flexDirection: 'row',
justifyContent: 'center',
}}>
<View style={{flex: 0.65, justifyContent: 'center'}}>
<Text style={{textAlign: 'center', fontSize: 15}}>
Tap twice any where on the screen to start.
</Text>
</View>
</View>
</View>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
}
export default TwoBackInstn;
// UI Styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e7f4f5',
justifyContent: 'center',
},
logo: {
width: 100,
height: 100,
},
});
解决方案
推荐阅读
- c++ - 在 Unreal C++ 中,如何阻止对象在循环中被破坏?
- payment - 为什么我从 Square 收到“只读字段已计算且无法由客户端设置。(order.returns)”?(我不发送该字段)
- javascript - 如何从给定的 JSON 数据格式制作 Javascript 对象
- mongoose - 使用 findOneAndUpdate 和 $inc 只执行一次操作
- arrays - C中二维数组中特定列的总和
- neo4j - 在“云图集”的 2 跳范围内寻找电影和演员
- android - AdblockWebView 仍在显示广告
- ethereum - 代币(solidity)- 用户支付 gas 后,从主应用程序钱包中奖励用户 X 数量的代币
- python - 无法使用 pandas_datareader 访问 Yahoo 财务数据
- node.js - 当我尝试创建新用户时,发布请求不起作用