Question

使用react-navigation并添加headerRight按钮

...
class Screen extends React.Component {
  static navigationOptions = {
    headerRight: (
      <TouchableOpacity>
        <Icon .../>
      </TouchableOpacity>
    )
  }
  render() {
    return (
      <View />
    )
  }
}

然后我想为此按钮设置动画，但在传递值时遇到问题

...
class Screen extends React.Component {
  static navigationOptions = {
    headerRight: (
      <Animated.View style={animatedStyle}>      <---- how to pass it 
        <TouchableOpacity>
          <Icon .../>
        </TouchableOpacity>
      </Animated.View>
    )
  }

  componentWillMount() {
    this.animatedValue = new Animated.Value(0)
  }

  componentDidMount() {
    Animated.timing(...}).start()
  }

  render() {
    const interpolateRotation = ...
    const animatedStyle = ...                    <---- the animatedStyle value
    return (
      <View />
    )
  }
}

我为this.animatedStyle尝试了animatedStyle和Animated.View，但它也无效。 static navigationOptions

中似乎class Screen不是内联的

Answer 1

您可以在构造函数中使用this.props.navigation.setParams({ headerRightButtonStyle: this.animatedValue })或componentWillMount来传递此值。然后这样读：

static navigationOptions = ({ navigation }) => {
  const params = navigation.state.params
  return {
    headerRight: (
      <Animated.View style={params.headerRightButtonStyle}>
        <TouchableOpacity>
          <Icon .../>
        </TouchableOpacity>
      </Animated.View>
    )
  }
}

setParams也会触发标题重新呈现。您可以使用此方法传递标题标题/样式/等。

相关文档：https://reactnavigation.org/docs/headers.html#using-params-in-the-title

如何将值传递给headerRight按钮

1 个答案: