Как выровнять два текста по левому краю и по центру, не добавляя paddingLeft, оставляя правые и левые значения в реакции-нативными - PullRequest
Новая
       36

Как выровнять два текста по левому краю и по центру, не добавляя paddingLeft, оставляя правые и левые значения в реакции-нативными

0 голосов
/ 29 октября 2019

Как нарисовать линию с двумя надписями, одним спереди, а другим в центре, как показано ниже enter image description here

  <View style ={{flexDirection: 'row', flex:1,
        justifyContent: 'space-between',
        borderBottomLeftRadius: 0,
        borderBottomRightRadius:0,
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        borderTopWidth: 0,
        borderBottomWidth: 1,
        marginBottom:5,
        marginTop: 5,
        borderLeftWidth:0,
        borderColor:'grey',
        borderRightWidth:0,
    }}>
        <Text style ={{fontSize:14,marginBottom:5}}> NAME </Text>
        <TouchableOpacity>
          <View style = {{justifyContent: 'center', flex:1, alignItems: 'center'}}>
            <Text style = {{ fontSize: 14, textAlign:'center', marginBottom:5}}> 'SELECT' </Text>
          </View>
        </TouchableOpacity>
      </View>

Ответы [ 3 ]

0 голосов
/ 29 октября 2019

Вот что-то чисто реализованное с использованием Flex. 

<View
    style={{
      flexDirection: "row",
      width: "80%",
      height: 25
    }}
  >
    <View
      style={{
        flex: 1,
        justifyContent: "flex-start",
        borderColor: "grey",
        borderBottomWidth: 1
      }}
    >
      <Text style={{ fontSize: 14 }}> NAME </Text>
    </View>
    <View
      style={{
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        borderColor: "grey",
        borderBottomWidth: 1
      }}
    >
      <TouchableOpacity>
        <Text style={{ fontSize: 14, textAlign: "center" }}>'SELECT'</Text>
      </TouchableOpacity>
    </View>
    <View style={{ flex: 1 }} />
  </View>
  <View
    style={{
      flexDirection: "row",
      width: "80%",
      height: 25
    }}
  >
    <View
      style={{
        flex: 1,
        justifyContent: "flex-start",
        borderColor: "grey",
        borderBottomWidth: 1
      }}
    >
      <Text style={{ fontSize: 14 }}> CLASS </Text>
    </View>
    <View
      style={{
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        borderColor: "grey",
        borderBottomWidth: 1
      }}
    >
      <TouchableOpacity>
        <Text style={{ fontSize: 14, textAlign: "center" }}>'SELECT'</Text>
      </TouchableOpacity>
    </View>
    <View style={{ flex: 1, borderColor: "grey", borderBottomWidth: 1 }} />
  </View>
0 голосов
/ 30 октября 2019

Это сработало для меня, как и ожидалось 

               <View style={{flexDirection:"row", bottomBorderWidth:1}}>
                    <View style={{flex:1}}>
                        <Text style={{justifyContent: 'flex-start',}}> Name <Text/>
                    </View>
                    <View style={{flex:1}}>
                        <Text style={{justifyContent: 'flex-start',}}> SELECT <Text/>
                    </View>
                </View>
0 голосов
/ 29 октября 2019

Просто wrap три view с внешней главной view и предоставьте середине view с flex из 80% или что-то в качестве предпочтения и дайте horizontal padding.

Более подробно вы можете посмотреть здесь. здесь

...