Css 无法在屏幕右侧启动对象

所以我使用React native size matters，到目前为止，它工作得相当完美。我无法让这两个箭头匹配。现在我已经在安卓系统上安装了，但当我在iphone上安装时，安卓系统就变得更为神奇了

我一直在使用paddingLeft和left来尝试实现这一点。我试着用正确的方法：但这并没有真正起作用。我正在尝试完成一些类似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
    },
});

从“React”导入React；
进口{
样式表，
文本，
看法
形象,，
文本输入，
可触摸不透明度，
}从“反应本机”；
从“expo linear gradient”导入{LinearGradient}；
从“@expo/vector icons”导入{MaterialCommunityIcons}；
从“react native size matters”导入{scale、verticalScale、moderateScale}；
导出默认功能主屏幕（）{
返回(
{/*帐户设置的单击开始*/}
单击此处查看帐户设置
{/*账户设置点击结束*/}
{/*单击注销的开始*/}
单击以注销
{/*点击注册结束*/}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
}, 
帐户占位符：{
颜色：'白色'，
尺寸：20，
},
用户名：{
颜色：'白色'，
字体大小：32，
fontWeight:'粗体'，
填充：20
},
});

使用填充使

单击注销

按钮与

单击帐户设置一样宽

可能会导致设备和首选项（字体、分辨率等）之间的更改

相反，我建议将按钮设置为

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,
  },
});

导出默认功能主屏幕（）{
返回(
{/*帐户设置的单击开始*/}
单击此处查看帐户设置
{/*账户设置点击结束*/}
{/*单击注销的开始*/}
单击以注销
{/*点击注册结束*/}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
paddingTop:150，
对齐项目：“居中”，
},
帐户占位符：{
颜色：'白色'，
尺寸：20，
},
按钮：{
宽度：“100%”，
flexDirection:'行'，
水平方向：10，
对齐项目：“居中”，
边缘底部：比例（15）
},
正文：{
flexGrow:1，
},
});

---

工作示例

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

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

---

获取可用屏幕的大小（必须减去其周围的任何帧），然后制作一个箭头所需的窗口大小，然后从可用屏幕宽度中减去箭头窗口宽度，这就是您的左窗口宽度。

我得到了它，谢谢，但有一件事我无法理解，那就是为什么“单击以注销”视图位于“单击以获取帐户设置”上方？难道不是相反吗？我的意思是，我总是可以改变观点，但它仍然很奇怪。这是因为你在最高触摸屏上排名前150位。我想你不是故意的，你是对的。我修正了我的答案和片段。谢谢