Как сделать stickyHeader с возвышением, используя scrollView? - PullRequest
Новая
       37

Как сделать stickyHeader с возвышением, используя scrollView?

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

Я использую ScrollView от реактивного. Мой компонент состоит из заголовка и нескольких карт под ним. Я хочу, чтобы мой заголовок был липким, что прекрасно работает благодаря stickyHeaderIndices ScrollView. Карты используют стиль «высота», поэтому, чтобы мой заголовок был виден, когда карты находятся поверх него, я также добавил повышение к компоненту заголовка. Все работает как положено (рабочий пример: https://snack.expo.io/_J5AKEpVC), пока заголовок (который является ScrollView) является прямым потомком ScrollView. Когда я обертываю его в компонент, карточки перекрывают мой заголовок (рабочий пример: https://snack.expo.io/ckKnLMkqK)

Вид: 

 export default function App() {
  return (
    <ScrollView style={styles.container} stickyHeaderIndices={[1]}>
      <View style={styles.card}>
        <AssetExample />
      </View>
      <Header />
      <View style={styles.card}>
        <AssetExample />
      </View>
      <View style={styles.card}>
        <AssetExample />
      </View>
      <View style={styles.card}>
        <AssetExample />
      </View>
      <View style={styles.card}>
        <AssetExample />
      </View>
    </ScrollView>
  );
}

Заголовок компонента: 

const Header = props => {
  return (
    <ScrollView horizontal style={styles.header}>
      <Text>header235</Text>
    </ScrollView>
  );

стили: 

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    zIndex: 10000,
    elevation: 5,
    marginBottom: 8 * 2,
  },
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  card: {
    backgroundColor: '#fff',
    padding: 8,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity: 0.15,
    margin: 10,
  },
});

Как это исправить? Что вызывает такое поведение?

...