styling - 当它粘住时，React-Native 样式一个粘性标题

Question

我有一个简短的问题:当 ScrollView 粘住时，如何将不同的样式应用于 ScrollView 中的粘性标题？
我想在它粘住时添加一些阴影/高度。

谢谢 :)

环境

react 原生:0.45.0

Answer 1

当前 React Native ScrollView组件有一个名为 stickyHeaderIndices 的属性，即使在您的 0.45版本。您可以使用它来传递应该具有粘性的标题子索引。之后您可以使用 onScroll事件以获取当前滚动位置，并在达到标题大小时添加带有阴影的自定义样式。请参阅此处的示例:

https://snack.expo.io/@fabiodamasceno/scroll-sticky-styled

或者，如果您更喜欢:

import * as React from 'react';
import { Text, View, ScrollView } from 'react-native';

const HEADER_HEIGHT = 20;
const headerStyle = {
  backgroundColor: '#e5e5e5',
  height: HEADER_HEIGHT
}
const myShadowStyle = {
  elevation: 3,
  shadowOpacity: 0.2,
  shadowRadius: 6,
  shadowOffset: {
    height: 3,
    width: 0,
  },
};

export default class App extends React.Component {
  state = {
     headerStyle : {
     ...headerStyle
    }
  }
  render() {
    return (
     <View style={{marginTop: HEADER_HEIGHT, height: 150}}>
      <ScrollView 
        stickyHeaderIndices={[0]} 
          onScroll={event => {
            const y = event.nativeEvent.contentOffset.y;
            if(y >= HEADER_HEIGHT)
              this.setState({
                headerStyle:{
                    ...headerStyle,
                    ...myShadowStyle
                }
              })
            else
              this.setState({
                  headerStyle:{
                      ...headerStyle,
                  }
                })
          }}
      >
        <View style={this.state.headerStyle}>
          <Text>My Header Title</Text>
        </View>
        <Text>Item 1</Text>
        <Text>Item 2</Text>
        <Text>Item 3</Text>
        <Text>Item 4</Text>
        <Text>Item 5</Text>
        <Text>Item 6</Text>
        <Text>Item 7</Text>  
        <Text>Item 8</Text>
        <Text>Item 9</Text>
        <Text>Item 10</Text>
        <Text>Item 11</Text>
        <Text>Item 12</Text>
        <Text>Item 13</Text>
        <Text>Item 14</Text>
      </ScrollView>
    </View>
    );
  }
}