无法让对象从屏幕右侧开始

Question

所以我使用 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
    },
});

Answer 1

使用填充使Click to Sign Out按钮尽可能宽Click for Account Settings可能会导致设备和首选项（字体、分辨率等）之间的变化

相反，我建议制作按钮flex容器并将文本设为flexGrow1，这样它将占用所有可用空间，从而将箭头“推”到右侧。

export default function HomeScreen() {
  return (
    <LinearGradient
      colors={['#272933', '#272933', '#272933']}
      style={styles.container}>
      {/* Beginning of Click for Accoutn Settings */}
      <View>
        <TouchableOpacity style={styles.button}>
          <MaterialCommunityIcons
            name="account-outline"
            color="white"
            size={50}></MaterialCommunityIcons>
          <View style={styles.text}>
            <Text style={styles.accountPlaceholder}>
              Click for Account Settings
            </Text>
          </View>
          <MaterialCommunityIcons
            name="chevron-right"
            color="white"
            size={50}></MaterialCommunityIcons>
        </TouchableOpacity>
        {/* End of Click for Accoutn Settings */}

        {/* Beginning of Click to Sign Out*/}
        <TouchableOpacity style={styles.button}>
          <MaterialCommunityIcons
            name="logout"
            color="white"
            size={50}></MaterialCommunityIcons>
          <View style={styles.text}>
            <Text style={styles.accountPlaceholder}>Click to Sign Out</Text>
          </View>
          <MaterialCommunityIcons
            name="chevron-right"
            color="white"
            size={50}></MaterialCommunityIcons>
        </TouchableOpacity>
        {/* End of Click to Sign up */}
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 150,
    alignItems: 'center',
  },
  accountPlaceholder: {
    color: 'white',
    fontSize: 20,
  },
  button: {
    width: '100%',
    flexDirection: 'row',
    paddingHorizontal: 10,
    alignItems: 'center',
    marginBottom: scale(15)
  },
  text: {
    flexGrow: 1,
  },
});

工作示例https://snack.expo.io/@moshfeu/so-67117698