Question

我在我的应用中使用react-native和react-navigation，目前尝试相对于滚动像素更改标题（我的StackNavigator）的不透明度。

这是我目前的标题风格：

headerStyle: {
   position: 'absolute',
   backgroundColor: 'transparent',
   zIndex: 100,
   top: 0,
   left: 0,
   right: 0,
   borderBottomWidth: 0,
   elevation: 0,
},

标题应该是不可见的，并且应该在用户滚动的每个像素时更加可见。在大概50或100像素后，标题的不透明度应为1。

Answer 1

我对同样的想法感兴趣。我想在用户向下滚动时更改标题的背景颜色。我正在使用动画API，但一直收到警告，事情不起作用。这就是我的尝试。

在屏幕中，我有以下代码：

  constructor(props) {
    super(props);
    this.scrollY = new Animated.Value(0);
  }

  componentWillMount() {
    this.props.navigation.setParams({
      bgColor: this.scrollY.interpolate({
        inputRange: [0, SCREEN_HEIGHT / 2 - 40],
        outputRange: ['transparent', 'rgb(255,255,255)'],
        extrapolate: 'clamp',
      }),
    });
  }

  render() {
    return (
      <ScrollView
        style={{ backgroundColor: 'black' }}
        contentContainerStyle={{ flexGrow: 1 }}
        onScroll={Animated.event([
          { nativeEvent: { contentOffset: { y: this.scrollY } } },
        ])}
        scrollEventThrottle={16}
      >
        <View>
.....
}

我还有以下navigationOptions：

  navigationOptions: ({ navigation }) => ({
    tabBarVisible: false,
    headerStyle: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      backgroundColor: !navigation.state.params
        ? 'transparent'
        : navigation.state.params.bgColor,
      borderBottomWidth: 0,
      elevation: 0,
    },
  }),

Warning Warning-cont

滚动时如何更改StackNavigator标头的不透明度？

1 个答案: