Question

我正在构建标题，我想隐藏标题内容 UNTIL 用户向下滚动到某个点。

（我的方法）

获取滚动位置（用户从顶部垂直滚动多少？）
如果scrollY大于50
显示标题名称。

这是render（）方法。我手动建了标题。我得到了scrollY值并将其设置为this.state.scrollY

<View style={{flex:1}}>
    <View style={styles.header}>
      {this._renderHeader(profile.username)}
    </View>
    <ScrollView style={styles.root}
      onScroll={(event)=>{this.setState({scrollY: event.nativeEvent.contentOffset.y})}}>
    // setting this.state.scrollY for scroll Y position
    ...

这是_renderHeader函数。（渲染标题）

  _renderHeader = (username) => {
    return (
      <View style={styles.headerLayout}>
        <View rkCardHeader style={styles.left}>
          ...
          <View style={{justifyContent: 'center'}}>
            {this._renderUsername(username)}
            // I want to show this string ONLY IF user 
            // scrolls down the window to the certain point.
          </View>
        ....
      </View>
    );
  }

（这是问题）这不仅仅渲染，也不会触发_renderUsername。

  _renderUsername = (username) => {
    let show = (this.state.scrollY > 50) ? true : false;
    if(show) {
      return (
        <RkText rkType='header3'>{username}</RkText>
      );
    } else {
      return <View />
    }
  }

Answer 1

您可以在redux存储中跟踪scrollY并将其映射到标题组件。

渲染标题组件时，使用三元表达式来决定是否渲染。

例如 - （从商店你会得到价值this.props.scrollY）

render() {
  return (
     {this.props.scrollY > 50 ? <AppHeader /> : ""}
  );
}

如何在React Native

1 个答案: