当同一行上有其他内容时，如何让一个 <View> 获取所有可用的 space？

Question

我正在尝试制作一个包含一些数据和每行按钮的平面列表。我曾尝试以典型的 "web" 方式进行操作，使用嵌套视图并相对于其父元素格式化元素，但没有成功。

这是列表的当前结构：

<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

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

当同一行上有其他内容时，如何让一个 <View> 获取所有可用的 space？

How do I make one <View> take all available space when there is something else on the same row?

react-native

react-native-flexbox