无法让对象从屏幕右侧开始
所以我使用 React 原生大小很重要,直到现在它都运行得非常完美。我无法让这两个箭头相匹配。现在我在 android 上排列了它,但是当我在 iphone 上排列它们时,android 变得更奇怪了。
我一直在使用 paddingLeft 并离开尝试完成这项工作。我试图正确使用:但这并没有真正起作用。我正在尝试完成诸如 flex rtl 之类的事情,以便比例可能更容易从屏幕右侧而不是左侧的不同距离工作?我不确定最好的方法来解决这个问题。
就像我说的,当我为 iphone 排列它时,差异要大得多。感谢您的任何见解!
import React from 'react';
import {
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
export default function HomeScreen() {
return (
<LinearGradient
colors={['#272933', '#272933', '#272933']}
style={styles.container}>
{/* Beginning of Click for Accoutn Settings */}
<TouchableOpacity>
<View style={{flexDirection: 'row', top: scale(150)}}>
<View style = {{paddingLeft: scale(10)}}>
<MaterialCommunityIcons
name="account-outline" color='white' size={50}>
</MaterialCommunityIcons>
</View>
<View style = {{justifyContent: 'center', paddingLeft: scale(10)}}>
<Text style={styles.accountPlaceholder} >
Click for Account Settings
</Text>
</View>
<View style = {{justifyContent: 'center', left: scale(5)}}>
<MaterialCommunityIcons
name="chevron-right" color='white' size={50} >
</MaterialCommunityIcons>
</View>
</View>
</TouchableOpacity>
{/* End of Click for Accoutn Settings */}
{/* Beginning of Click to Sign Out*/}
<TouchableOpacity>
<View style={{flexDirection: 'row', top: scale(150), paddingTop: scale(30)}}>
<View style = {{paddingLeft: scale(15)}}>
<MaterialCommunityIcons
name="logout" color='white' size={50} >
</MaterialCommunityIcons>
</View>
<View style = {{justifyContent: 'center', paddingLeft: scale(10)}}>
<Text style={styles.accountPlaceholder} >
Click to Sign Out
</Text>
</View>
<View style = {{justifyContent: 'center', paddingLeft: scale(80)}}>
<MaterialCommunityIcons
name="chevron-right" color='white' size={50}>
</MaterialCommunityIcons>
</View>
</View>
</TouchableOpacity>
{/* End of Click to Sign up */}
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
accountPlaceholder: {
color: 'white',
fontSize: 20,
},
userName:{
color: 'white',
fontSize: 32,
fontWeight: 'bold',
padding: 20
},
});