Реагировать на проблему с выравниванием собственной кнопки - PullRequest
Новая
       20

Реагировать на проблему с выравниванием собственной кнопки

0 голосов
/ 11 мая 2018

У меня есть приложение Expo, React Native с использованием Native Base.

Имеются некоторые проблемы с выравниванием кнопки на iPhone.

Отображает список карточек с кнопкой и текстом, кнопка выравнивается вправо, когда текст больше одной строки, выравнивание кнопки не выполняется.

Код выглядит следующим образом: 

<List dataArray={items}
          renderRow={(item) =>
            <Card rounded>
              <CardItem rounded style={{margin:5}}>
                <Grid>
                  <Row>
                    <Text style={styles.headertext}>{item.site.name}</Text>
                    <Right style={{ flex: 1 }}>
                    {this.getEventType(item)}
                    </Right>
                  </Row>
                  <Row>
                    <Text style={styles.textIdBold}>{item.controller.name}</Text><Text> </Text><Text style={styles.textId}>{item.controller.controller_id}</Text>
                  </Row>
                  <Row>
                    <Text style={styles.textId}>{item.date}</Text>
                  </Row>
                  <Row>
                    <Text style={styles.eventMessage}>
                    {item.description}  
                    </Text>
                  </Row>
                </Grid>
              </CardItem>
            </Card>
          }>

возврат getEventType (item): 

<Button small rounded info>
   <Text>Settings</Text>
</Button>

соответствующие стили:

HeaderText: 

fontSize: (Platform.OS === 'ios') ? 15 : 18,
color: '#000',
marginBottom: 0,
textAlign: 'center',
alignSelf:'flex-start'

textIdBold 

fontSize: (Platform.OS === 'ios') ? 12 : 15,
color: '#000',
fontWeight: 'bold',
paddingTop: (Platform.OS === 'ios') ? 3 : 8

textId 

fontSize: (Platform.OS === 'ios') ? 12 : 15,
color: '#000',
paddingTop: (Platform.OS === 'ios') ? 3 : 8

Скриншот происходящего:

Одна строка - не проблема для событий.

Любые мысли будут высоко оценены!

После добавления: 

     <Right style={{ flex: 1 }}>
         <View style={{position:'absolute', top: 0, right: 0, zIndex:100}}>
           {this.getEventType(item)}
         </View>
     </Right>

Результат лучше, но не на 100% решен:

выглядит намного лучше

Ответы [ 2 ]

0 голосов
/ 07 марта 2019 
      <View style={styles.buttonView}>
        <Button
        >
          <Text>
            Submit
          </Text>
        </Button>
      </View>

А, 

        buttonView: {
         alignSelf: 'center'
        }
0 голосов
/ 11 мая 2018

Вам просто нужно установить один Вид , чтобы показать свою кнопку.Попробуйте следующий код: 

<View style={{position:'absolute', top: 10, right: 10}}>
{this.getEventType(item)}
</View>

Надеюсь, это поможет вам:)

...