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

Question

所以我使用 React 原生大小很重要，直到现在它运行得非常完美。我无法让这两个箭头匹配。现在我已经在 android 上排好队了，但是当我在 iphone 上排好队时，android 的就变得更糟了。

我一直在使用 paddingLeft 和 left 来尝试完成这项工作。我试图使用 right: 但这并没有真正起作用。我正在尝试完成诸如 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 设为容器并将文本 flexGrow 设为 1，这样它将占用所有可用空间，因此会将箭头“推”到右侧。

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

Answer 2

忘记填充，因为它在您的下一个屏幕上可能会有所不同，或者如果您的字体发生变化，它可能会有所不同。

使用并排显示的两个单独的窗口或表单。

获取可用屏幕的大小（必须减去其周围的任何框架），然后将窗口设置为箭头所需的大小，然后从可用屏幕宽度中减去该箭头窗口宽度，即左侧窗口宽度。