在React本机中将项目对齐到左和右

Question

你如何调整项目的左和右在反应本土化？

无论我尝试如何组合flexbox属性，这两组文本都会像下面这样粘在一起：

​

​

您是如何使“登录”位于屏幕的右侧和左侧的存储库的？

这是我的代码：

import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    paddingLeft: 10,
    paddingBottom: 20,
    backgroundColor: 'grey',
  },
  text: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold'
  },
  linkText: {
    color: 'white',
  },
  nesteddivleft: {
    flex: 1,          
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  nesteddivright: {
    flex: 1,
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "center",
  },
  scrollbar: {
display: 'flex',
justifyContent: 'space-between'
  }
});

const AppBar = () => {
  return <><View style={styles.container}>
    <ScrollView style="scrollview" horizontal>
    <View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
    <View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
    </ScrollView>
    </View>
    </>
};

export default AppBar;

应用程序：

import Main from './src/components/Main'
import { StatusBar } from 'expo-status-bar';
import { NativeRouter } from 'react-router-native';


export default function App() {

  return (
<> 
     <NativeRouter>
     <Main/>
     </NativeRouter>
     <StatusBar style="auto" />
</>
  );
}

正如您所看到的，我已经尝试在父div上放置“内容:空格”，但这没有任何作用。

我也尝试过这个解决方案，但它什么也没做：Aligning elements left, center and right in flexbox

Answer 1

    import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    paddingLeft: 10,
    paddingBottom: 20,
    backgroundColor: 'grey',
    display: "flex",
justifyContent: "space-between",
minWidth: '100%',
flexDirection: "row"
  },
  text: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold'
  },
  linkText: {
    color: 'white',
  },
  nesteddivleft: {
  },
  nesteddivright: {
  },
  scrollbar: {

  }
});

const AppBar = () => {
  return <><View style={styles.container}>
  
    <View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
    <View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
 
    </View>
    </>
};

export default AppBar;

解决问题的步骤：

1. 取出滚动视图组件。
2. 将显示设置为flex，将内容调整为间隔，将minWidth设置为100%，将flex方向设置为父组件中的行。

不是最优的，因为我需要在那里的滚动视图组件，我需要找到一个解决方案，让我有这个组件作为一个子。