Блог

Как бы я мог применить другой стиль нижнего колонтитула в react native в зависимости от высоты конкретного ScrollView?

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

Надеюсь, это имеет хоть какой-то смысл!

Пример ниже для демонстрации.

Спасибо, Саймон

 //If the view is larger than the phone height, have the footer at the bottom of the scroll view
<View style={{flex: 1}}>
  <Header navigation={this.prop.navigation}
  <Scrollview>
    <View>
      <Text>Content</Text>
    </View>
    <View>
      <Image source={image} style={styles.footerImage} />
    </View>
  </ScrollView>
</View>

//If the content view is smaller than the phone size, the view needs to be outside the scrollview and use stick styles
<View style={{flex: 1}}>
  <Header navigation={this.prop.navigation}
  <Scrollview>
    <View>
      <Text>Content</Text>
    </View>
  </ScrollView>
  <View>
    <Image source={image} style={styles.stickyFooter} />
  </View>
</View>

const styles = StyleSheet.create({
  footerImage: {
    width: Dimensions.get('window').width,
    maxHeight: 235,
    resizeMode: "contain"
  },
  stickyFooter: {
    flex: 1,
    position: 'absolute',
    left: 0,
    top: 0,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});
  

Чао, вы могли бы переместить положение нижнего колонтитула с помощью minHeight на Scrollview css. Что-то вроде:

 <Scrollview style={styles.scrollview}>
    <View>
      <Text>Content</Text>
    </View>
 </ScrollView>
  

Затем в ваших стилях:

 const styles = StyleSheet.create({
    ...
    scrollview:{
       minHeight: 300   // 300 for example
    }
});
  

Таким образом, если Scrollview не содержит элементов, нижний колонтитул отображается после 300. В противном случае, если Scrollview содержит элементы и его высота превышает 300, нижний колонтитул будет перемещен вниз в соответствии с Scrollview высотой.

 import React from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  Dimensions,
  Image,
} from 'react-native';
export default function App() {
  return (
    <View>
      <ScrollView>
        <View style={styles.body}>
          <Text>Body</Text>
        </View>
        <View style={styles.footer}>
          <Text>Footer</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const { height } = Dimensions.get('window');

const styles = StyleSheet.create({
  body: {
    minHeight: height, // This is where the magic happens
    backgroundColor: 'blue', // This is just for visual indication
  },
  footer: {
    minHeight: 150,
    backgroundColor: 'green' // This is just for visual indication
  }
});
  

Должно работать для разных высот экрана.