React Native Align Self Flex End не работает должным образом - PullRequest
Новая
       33

React Native Align Self Flex End не работает должным образом

0 голосов
/ 04 мая 2020

Довольно простой, нужно выровнять часть текста слева, а часть справа. Для этого я подумал, что буду использовать flexbox со следующим кодом: 

return (
<TouchableOpacity disabled={isLoading}>
  <View style={styles.container}>
    <View style={styles.venueImageContainer}>
      {isLoading ? (
        <Loader />
      ) : (
        <Image style={styles.venueImage} source={ { uri: getImage()} } />
      )}
    </View>
    <View style={{flexDirection: 'row', backgroundColor: 'red'}}>
      <View style={{alignSelf: 'flex-start', backgroundColor: 'blue'}}>
        <Text style={styles.venueName}>{venue.name}</Text>
      </View>
      <View style={{alignSelf: 'flex-end', backgroundColor: 'green'}}>
        <Text style={styles.personCount}>Test</Text>
      </View>
    </View>
  </View>
</TouchableOpacity>)

Единственные стили, на которые ссылаются через «Стили». предназначены для цвета и размера текста. Так что ничего, что могло бы помешать гибкому расположению. Image showing flexbox error

Таким образом, родительский контейнер получает полную ширину, но дочерние элементы не выравниваются по flex-start или flex-end.

Я новичок в React / React Native, пожалуйста go полегче ...

Ура, ребята :)

Ответы [ 3 ]

1 голос
/ 04 мая 2020

Может быть, это означает, что конец просмотра red находится в конце самого green просмотра. Поместите alignSelf: 'stretch' в представление red, как показано ниже: 

return (
<TouchableOpacity disabled={isLoading}>
  <View style={styles.container}>
    <View style={styles.venueImageContainer}>
      {isLoading ? (
        <Loader />
      ) : (
        <Image style={styles.venueImage} source={ { uri: getImage()} } />
      )}
    </View>
    <View style={{flexDirection: 'row', backgroundColor: 'red', alignSelf: 'stretch'}}>
      <View style={{alignSelf: 'flex-start', backgroundColor: 'blue'}}>
        <Text style={styles.venueName}>{venue.name}</Text>
      </View>
      <View style={{alignSelf: 'flex-end', backgroundColor: 'green'}}>
        <Text style={styles.personCount}>Test</Text>
      </View>
    </View>
  </View>
</TouchableOpacity>)

Или вы можете использовать position: 'absolute в зеленом представлении, чтобы изменить его положение с некоторыми фиксированными значениями, например, следующим образом: 

return (
<TouchableOpacity disabled={isLoading}>
  <View style={styles.container}>
    <View style={styles.venueImageContainer}>
      {isLoading ? (
        <Loader />
      ) : (
        <Image style={styles.venueImage} source={ { uri: getImage()} } />
      )}
    </View>
    <View style={{flexDirection: 'row', backgroundColor: 'red'}}>
      <View style={{alignSelf: 'flex-start', backgroundColor: 'blue'}}>
        <Text style={styles.venueName}>{venue.name}</Text>
      </View>
      <View style={{backgroundColor: 'green', position: 'absolute', right: 10}}>
        <Text style={styles.personCount}>Test</Text>
      </View>
    </View>
  </View>
</TouchableOpacity>)

Измените значение right: 10 в соответствии с вашими потребностями.

или поместите justifyContent: 'space-between' в представление red, как показано ниже: 

return (
<TouchableOpacity disabled={isLoading}>
  <View style={styles.container}>
    <View style={styles.venueImageContainer}>
      {isLoading ? (
        <Loader />
      ) : (
        <Image style={styles.venueImage} source={ { uri: getImage()} } />
      )}
    </View>
    <View style={{flexDirection: 'row', backgroundColor: 'red', justifyContent: 'space-between'}}>
      <View style={{alignSelf: 'flex-start', backgroundColor: 'blue'}}>
        <Text style={styles.venueName}>{venue.name}</Text>
      </View>
      <View style={{alignSelf: 'flex-end', backgroundColor: 'green'}}>
        <Text style={styles.personCount}>Test</Text>
      </View>
    </View>
  </View>
</TouchableOpacity>)

но если вы хотите иметь более двух представлений внутри этого красного представления, одно из них будет посередине, поэтому я не думаю, что вы этого захотите.

(Я не знаю, почему ваш красный вид растягивается путь до конца просмотра, но не должно, я думаю (я могу ошибаться в этом))

0 голосов
/ 04 мая 2020

А вы пробовали space-between? 

<View style={{flexDirection:'row', justifyContent:'space-between', backgroundColor:'red'}}>
0 голосов
/ 04 мая 2020

Ваше решение не работает, потому что свойство CSS align-self используется для поперечной оси, а alignSelf работает таким же образом, поэтому его нельзя использовать для выравнивания по горизонтали, которое здесь является главной осью.

  1. Первое решение: используйте justifyContent: space-between, он отлично работает в вашем случае: 
<View style={{ flexDirection: 'row', backgroundColor: 'red', justifyContent: 'space-between' }}>
                    <View style={{backgroundColor: 'blue' }}>
                        <Text>Left</Text>
                    </View>
                    <View style={{backgroundColor: 'green' }}>
                        <Text>Right</Text>
                    </View>
</View>
Второе решение: используйте View с flex: 1, чтобы «заполнить» среднее пространство: 
<View style={{ flexDirection: 'row', backgroundColor: 'red' }}>
                    <View style={{ backgroundColor: 'blue' }}>
                        <Text>Left</Text>
                    </View>
                    <View style={{flex: 1}}></View>
                    <View style={{ backgroundColor: 'green' }}>
                        <Text>Right</Text>
                    </View>
 </View>
...