React Native 2 Text元素显示一行偏移而不是同一行

Question

我想在同一Y轴上显示左对齐的文本和右对齐的文本。

到目前为止，结果是它们被抵消了：

如何在同一行上显示2个元素？

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Dimensions } from 'react-native';
import Pubsub from 'pubsub-js';
import Row from './Row';

const {
  width: MAX_WIDTH,
  height: MAX_HEIGHT,
} = Dimensions.get('window');

export default class ActionChart extends React.Component {
  constructor(props) {
    super(props);
    const { data, playerId } = props;
    const { seats } = data;

    if (props.disable) {
      this.disabled = true;
    }
    this.x = seats.x === playerId ? "Me" : seats.x;
    this.o = seats.o === playerId ? "Me" : seats.o;
    this.pressed = this.pressed.bind(this);
  }

  pressed() {
    if (this.disabled) {
      return;
    }
    Pubsub.publish('tapped-table', this.props.data);
  }

  render() {
    const { data } = this.props;
    const {status, seats} = data;
    const {current_player} = status;
    let {x, o} = seats;

    x = current_player === "x" ? (x + "'s turn.") : x + ".";
    o = current_player === "o" ? (o + "'s turn.") : o + ".";

    return <View contentContainerStyle={styles.container}>
      <View style={styles.turnRow}>
        <Text style={styles.xName}>{x}</Text>
        <Text style={styles.oName}>{o}</Text>
      </View>
    </View>
  }
}

const styles = StyleSheet.create({
  turnRow: {
    backgroundColor: "#4d5b5b",
    height: 50,
    width: MAX_WIDTH,
    flex: 0,
    flexDirection: 'column'
  },

  xName: {
    textAlign: 'left',
    width: (MAX_WIDTH/2)-10
  },

  oName: {
    textAlign: 'right',
    width: (MAX_WIDTH/2)-10,
    alignSelf: 'flex-end'
  },

  container: {


    flex: 0,
    flexDirection: 'row',
    height: 50,
    width: MAX_WIDTH,
    backgroundColor: '#434f4f',
    color: '#000000',
  }
});

Answer 1

在styleSheet中添加/重写以下内容

turnRow: {
    backgroundColor: "#4d5b5b",
    height: 50,
    width: MAX_WIDTH,
    flex: 1,     //edited could be better. if not just keep your own "0"
    flexDirection: 'row',            //change this
    justifyContent: 'space-between' //add this
  },