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

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

  
    opened: {item.opened}
    closed: {item.closed}
  
  
    {item.status}
  

样式:

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 (
           this.showItemDetail(item)}  underlayColor='#dddddd' #fffce2', borderBottomWidth:1, borderBottomColor: '#ededed' }}>
              
                  
                      
                          {item.name}
                          
                              
                                  opened: {item.opened}
                                  closed: {item.closed}
                              
                              
                                  {item.status}
                              
                          
                      
                  
                  
              
          
      );
  },

  render: function() {
    return (
      
        
      
    );
  }
});

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);