ReactNative:如何在父视图中将元素放到右侧

Question

我想知道如何将红色标签放到右边？

看来,flex不支持任何已知的东西,比如"align:right"或"float:right".

我玩flex:1和flex:2并最终移除flex,它没有任何区别.

如何将元素放在右边而其他元素保留在左侧？

renderItem(item) {

    return (
        <TouchableHighlight onPress={() => this.showItemDetail(item)}  underlayColor='#dddddd'>
            <View>
                <View style={styles.container}>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>{item.name}</Text>
                        <View style={styles.detailBox}>
                            <View>
                                <Text style={styles.details}>opened: {item.getOpenedFromNow()}</Text>
                                <Text style={styles.details}>closed: {item.getClosedFromNow()}</Text>
                            </View>
                            <View>
                                {this.getClosingInfo(item)}
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.separator}/>
            </View>
        </TouchableHighlight>
    );
}

样式(摘录):

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fffce1',
    padding: 15,
},

detailBox: {
    flex: 1,
},
itemRow: {
    flex: 1,
    marginTop: -10
},
title: {
    fontSize: 15,
    marginBottom: 8
},
closed: {
    fontSize: 15,
    color: 'red',
},

Answer 1

您可以使用flex-direction:row将detailBox项目包装在flexbox容器中,然后将flex:1设置为两个主要子组件:

<View style={styles.detailBox}>
  <View style={styles.box1}>
    <Text style={styles.details}>opened: {item.opened}</Text>
    <Text style={styles.details}>closed: {item.closed}</Text>
  </View>
  <View style={styles.box2}>
    <Text style={styles.status}>{item.status}</Text>
  </View>
</View>

样式:

box1: {
  flex:1,
},
box2: {
  flex:1,
},
detailBox: {
  flexDirection: 'row'
}

我还成立了一个工作示例这里(代码如下所示).

https://rnplay.org/apps/_yOSHw

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableHighlight
} = React;

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var data = [{name: 'issue 1', opened: '2 days ago', closed: 'a day ago', status: 'CLOSED'}, {name: 'issue 2', opened: '10 days ago', closed: '3 days ago', status: 'CLOSED'}]

var SampleApp = React.createClass({

  getInitialState() {
    return {
        dataSource: ds.cloneWithRows(data),
    };
  },

  renderItems(item) {
      return (
          <TouchableHighlight onPress={() => this.showItemDetail(item)}  underlayColor='#dddddd' style={{ backgroundColor: '#fffce2', borderBottomWidth:1, borderBottomColor: '#ededed' }}>
              <View>
                  <View>
                      <View style={styles.itemRow}>
                          <Text style={styles.title}>{item.name}</Text>
                          <View style={styles.detailBox}>
                              <View style={styles.box1}>
                                  <Text style={styles.details}>opened: {item.opened}</Text>
                                  <Text style={styles.details}>closed: {item.closed}</Text>
                              </View>
                              <View style={styles.box2}>
                                  <Text style={styles.status}>{item.status}</Text>
                              </View>
                          </View>
                      </View>
                  </View>
                  <View style={styles.separator}/>
              </View>
          </TouchableHighlight>
      );
  },

  render: function() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderItems}
        />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60,
  },
  status: {
    textAlign: 'center',
    paddingRight:20,
    color: 'red', 
    fontSize:18
  },
  box1: {
    flex:1,
    padding:10
  },
  box2: {
    flex:1,
    padding:10
  },
  title: {
    fontSize:18,
    paddingTop:10, 
    paddingLeft:10
  },
  detailBox: {
    flexDirection: 'row'
  },
  separator: {

  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);