react-native - 我怎么做一个当同一行有其他东西时占用所有可用空间？

Question

我试图制作一个包含一些数据和每行按钮的平面列表。我试图以典型的“网络”方式来做这件事，嵌套视图并相对于它们的父元素格式化元素，但没有成功。

这是列表的当前结构：

<View style={styles.row}>

     <View style={styles.rowinfo}>

         <View>
             <Text style={styles.primaryID}>{item.name ? item.name : item.phoneNumber}</Text>
             <Text style={styles.secondaryID}>{item.name ? item.phoneNumber : 'Ukjent innringer'}</Text>
          </View>

          <View>
              <Text style={styles.textalignRight}>Varighet: {item.durationDisplay}</Text>
              <Text style={styles.textalignRight}>{item.dateStringTime}</Text>
           </View>
         </View>

         <TouchableOpacity  style={styles.rowicon}>
             <View style={styles.ban_icon}>
                 <Icon
                   name='ban'
                    type='font-awesome'
                    color='#FFF'
                  />
             </View>
         </TouchableOpacity>

     </View>

这是我的样式：

const styles = StyleSheet.create({
row: {
  flex: 1,
  marginTop: 1,
  paddingVertical: 10,
  paddingHorizontal: 15,
  flexDirection: "row",
  justifyContent: "space-between",
  borderBottomWidth: 1,
  borderBottomColor: '#f9f9f9'

},
rowinfo:{
  flexDirection: "row",
  alignSelf: 'stretch'
},

primaryID: {
  fontWeight: 'bold'
},
textalignRight: {
  textAlign: 'right'
},
rowbt: {
  justifyContent: "center", 
  alignItems: "center", 
  backgroundColor: 'red'
},
ban_icon: {
  color: '#FFF',
  fontWeight: 'bold',
  fontSize: 14,
  marginHorizontal: 8
}
});

我试图让它看起来像这样：

但我不断得到这个：

Answer 1

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.row}>
            <View style={styles.rowinfo}>
         <View>
             <Text style={styles.primaryID}>{'Phone Number'}</Text>
             <Text style={styles.secondaryID}>{'Ukjent innringer'}</Text>
          </View>
         </View>
         <View style={{ flexDirection: 'row'}}>
          <View>
              <Text style={styles.textalignRight}>Varighet: {'1m og 20s'}</Text>
              <Text style={styles.textalignRight}>{'13:23:11'}</Text>
           </View>
         <TouchableOpacity  style={styles.ban_icon}>
             <View style={styles.ban_icon} />
         </TouchableOpacity>
        </View>
     </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
  },
row: {
  backgroundColor: 'green',
  width: '100%',
  marginTop: 1,
  paddingVertical: 10,
  paddingHorizontal: 15,
  flexDirection: "row",
  justifyContent: "space-between",
  borderBottomWidth: 1,
  borderBottomColor: '#f9f9f9'
},
rowinfo:{
  flex: 1,
  flexDirection: "row",
},

primaryID: {
  fontWeight: 'bold'
},
textalignRight: {
  textAlign: 'right'
},
ban_icon: {
padding: 10,
backgroundColor: 'red',
marginLeft: 10,
}
});

查看小吃：https ://snack.expo.io/@legowtham/43c687

Answer 2

通过使用绝对定位，我能够得到我想要的结果。