Блог

Я хочу заменить эту строку комментариев на строку комментариев нижнего колонтитула:

С чем-то вроде этого:

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

  <View>
        <FlatList
            data={this.state.commentsArray}
            renderItem={renderItem}
            keyExtractor={item => item.key}
            ListHeaderComponent={this.renderListHeader}
            contentContainerStyle={{ paddingBottom: 80 }}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            onRefresh={this._refresh}
            refreshing={this.state.isLoading}
            // ListFooterComponent={this.renderCommentComponent}
        />
        
        <View style={styles.commentFooter}> <--------------------- Footer View
            <CommentComponent postID = {this.state.postID}/> <---- Comment Component
        </View>
    </View>
 

С помощью этого стиля:

 commentFooter: {
    position: 'absolute', 
    left: 0, 
    right: 0, 
    bottom: 0,
    backgroundColor:'#FFFFFF',
    height:80,
    alignItems:'center',
    padding: 10
},
 

но, как я уже сказал, позиция является абсолютной, поэтому всплывающая клавиатура закрывает ввод.

Вот как я хочу, чтобы это выглядело при нажатии на ввод текста в нижнем колонтитуле:

Я полагаю, это можно назвать «липким» нижним колонтитулом. Как я могу реализовать такую функциональность в своем приложении?

Вы уверены, что ищете липкий нижний колонтитул?

Липкий нижний колонтитул — это когда нижний колонтитул вашей страницы «прилипает» к нижней части окна просмотра (экрана) в тех случаях, когда содержимое короче высоты окна просмотра. Если у вас достаточно содержимого, нижний колонтитул не будет виден, пока вы не прокрутите страницу вниз.

Если вы хотите такого поведения, есть несколько способов добиться этого.

Это отличный пример хорошего макета: https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer—download.html (это даже рекомендуется в руководстве по нижнему колонтитулу в MDN)

Метод заключается в следующем: установите оболочку (или тело) с минимальной высотой 100% (или 100vh), используйте сетку отображения и задайте явную сетку следующим образом:

 .wrapper {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
 

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

Исправленный пример нижнего колонтитула:

Простой пример:

 .footer {
  width: 100%;
  color: #fff;
  background-color: #000;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 20px;
  font-weight: bold;
} 

 <div class="footer">
  I am a fixed footer - always shown!
</div> 

Если вы правильно настроите свой макет, у вас не должно возникнуть проблем с клавиатурой мобильных телефонов.