Card标签里面的Text标签是并排写的，如何让每个Text标签单独一行？

Question

我有一个 Card 标签，在卡片 header 中包含一些 Text 标签，文本显示为内联，但我试图将它们放在一起。

return (
      <Card style={style.card}>
          <CardItem header style={style.header}>
            <Thumbnail source={{uri: `${link}images/${player.photo}`}}/>
            <Text style={{fontSize: 18,marginLeft:10}}>{player.username}</Text>
            <Text style={{fontSize: 16,marginLeft:10}}>{player.fullName}</Text>
            <Text style={{fontSize: 14,marginLeft:10}}>{player.position}</Text>
          </CardItem>
       </Card>
    );

Answer 1

如果要垂直排序文本，可以使用flexDirection: "column" .

如果你想为每个文本创建行，你可以使用textDecorationLine。也可以是 styled 或 color

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code 
        </Text>
        <Text style={styles.paragraph}>
          Change code 
        </Text>
        <Text style={styles.paragraph}>
          Change code 
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    flexDirection: "column" // vertical alignment
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    textDecorationLine: 'underline',
    textDecorationColor: 'blue',
    textDecorationStyle: 'solid'
  },
});

Card标签里面的Text标签是并排写的，如何让每个Text标签单独一行？

Text tags inside the Card tag are written beside each other, how to make each Text tag in a separate line?

react-native

expo

native-base