Как сделать так, чтобы один <View>занимал все доступное пространство, когда в том же ряду есть что-то еще? - PullRequest
Новая
       26

Как сделать так, чтобы один <View>занимал все доступное пространство, когда в том же ряду есть что-то еще?

1 голос
/ 10 июля 2019

Я пытаюсь составить плоский список с некоторыми данными и кнопкой в ​​каждой строке. Я пытался сделать это в типичном «сетевом» стиле, с вложенными представлениями и форматированием элементов относительно их родителя, но безуспешно.

это текущая структура списка: 

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

Я пытаюсь сделать так, чтобы это выглядело так:

Desired result

Но я продолжаю получать это:

Actuall result

Ответы [ 2 ]

0 голосов
/ 10 июля 2019

Я смог получить желаемый результат, используя абсолютное позиционирование.

0 голосов
/ 10 июля 2019 
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

...