在 <text> 组件之间给出 space，它是视图组件中的子组件

Question

    import { Text, View, Image, StyleSheet } from 'react-native';
import * as react from 'react';
export default function TabOneScreen(){

  return (
   <View style={styles.container}>

    <Image source = {{uri:'https://notjustdev-dummy.s3.us-east-2.amazonaws.com/avatars/elon.png'}} style={styles.image} />

我的任务是给这个应该出现在一条直线上的文本 space (Elon Musk
11:11AM) 使用 justifyContent: 'space-between' 但它没有任何效果而是文本仍然在一起 (Elon Musk11:11AM)

      <View style={styles.row}>
        <Text style={styles.name}>Elon Musk</Text>
        <Text style={styles.text}>11:11 AM</Text>
      </View>
      <Text style={styles.text}>Boi Ice for Janet</Text>
    </View>
   </View>
);
  }

const styles = StyleSheet.create({
  
container:{
    flexDirection:'row',
    padding:10,
    },

  image:{
    height:60,
    width:60,
    borderRadius:50,
    marginRight:10,
   },
  name:{
    fontSize:20,
  color:'blue',
  },

  row:{
    flexDirection:'row',
    justifyContent: 'space-between',
    },

text:{
  fontSize:20,
  color:'blue'
}
});

Answer 1

您需要使用

row:{
  flex:1
  // other keys
}

and/or

row:{
  width:'100%'
}

使视图（行）覆盖屏幕的宽度。

在 <text> 组件之间给出 space，它是视图组件中的子组件

Give space between <text> components which is a child in a view component

space

justify