Warm tip: This article is reproduced from serverfault.com, please click

reactjs-在React Native中渲染特定组件

(reactjs - Rendering specific component in React Native)

发布于 2020-11-27 12:41:44

我使用ScrollView的onMomentumScrollEnd处理程序根据recyclerlistview组件中的contentOffset确定当前页面

 const [currentPage, setCurrentPage] = useState(0);

 const onScrollEnd = (e) => {
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    setCurrentPage(pageNum);
  };

return (
   <View style={{ flex: 1 }}>
        <RecyclerListView
          rowRenderer={({ item }, index) => <Page item={item} id={index} />}
          dataProvider={list}
          layoutProvider={layoutProvider}
          onMomentumScrollEnd={onScrollEnd}
          isHorizontal
          pagingEnabled
        />
        <View style={{ flex: 0.1, backgroundColor:"gold" }}>
          <Text>{`current page: ${currentPage}`}</Text>
       </View>
      </View>
  );

我想在Text组件中显示当前页面,但是当onMomentumScrollEnd处理程序中currentPage状态更改时,整个应用程序将重新呈现。我只需要重新渲染文本组件,对此有任何建议。

Questioner
Aymen Guidad
Viewed
11
Aymen Guidad 2020-11-28 17:47:00

我找到了解决方案。最简单的方法是创建一个类组件并将所显示的组件放入其中,然后引用它并使用ref hook更改当前页面

 class DisplayCurrentPage extends React.Component {
   contractor(prop){
    super(prop)
    state:{currentPage:0}
   }
   updateCurrentPage = (index) => {this.setState({CurrentPage: index})}
   render(){
    return(
      <View style={{ flex: 0.1, backgroundColor:"gold" }}>
          <Text>{`current page: ${this.state.currentPage}`}</Text>
       </View>
     );

   }

 };
  

 const reference = createRef();
 const onScrollEnd = (e) => {
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    reference.current.updateCurrentPage(pageNum);
  };

return (
   <View style={{ flex: 1 }}>
        <RecyclerListView
          rowRenderer={({ item }, index) => <Page item={item} id={index} />}
          dataProvider={list}
          layoutProvider={layoutProvider}
          onMomentumScrollEnd={onScrollEnd}
          isHorizontal
          pagingEnabled
        />
        <DisplayCurrentPage ref={reference} />
      </View>
  );

更改页面后,仅重新显示DisplayCurrentPage