react-native-scrollable-container

基於React Native官方元件ScrollView與React-Navigation實現headerTitle與介面的滑動的互動效果

Installation

npm install react-native-scrollable-container --save

Import into your project

import ScrollContainer from 'react-native-scrollable-container';

Examle useage

static
 
 navigationOptions = ({ navigation }) => ({
  ...ThemeStyles.indexHeaderStyle,
  headerTitleStyle: {
    ...ThemeStyles.indexHeaderStyle.headerTitleStyle,
    opacity: navigation.getParam('opacity', new Animated.Value(0)),
  },
  headerTitle: navigation.getParam('title', ''),
});

<ScrollContainer title=
 
"個人中心" navigation={this.props.navigation} scrollOffset={this.state.scrollOffset}>
  <Header
    onLayout={(e) => { this.setState({ scrollOffset: e.nativeEvent.layout.height - px2dp(18) }) }}
    title="個人中心"
    iconName="cog"
    onPress={() => this.props.navigation.navigate('settings')
 
}
  />
  {this.renderUserInfo()}
  {this.renderOptions()}
</ScrollContainer>

Properties

GitHub專案地址