Question

我想知道如何让红色标签在右边？

看来，flex并不支持任何已知的事情，例如＆＃34; align：right＆＃34;或者＆＃34;浮动：正确＆＃34;。

我玩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'
}

我还设置了一个工作示例here（下面的代码）。

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

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

1 个答案: