react-native-studio / react-native-mjrefresh Goto Github PK

没办法用Pod集成吗？

你好，用了这个组件之后，发现会卡顿，一顿一顿的。
我感觉你可以从 他这个RefreshControl组件中去重写一个。。不懂原生，不晓得好写不。。。

使用MJRefresh后，上拉加载的onEndReached不再调用，怎么设置onEndReachedThreshold都没用，怀疑是重写了renderScrollComponent组件后，生成新的scrollView与FlatList本身滑动事件冲突，求处理方案。

代码：
return <FlatList
style={[{height:px2dp(500),width:theme.screenWidth,backgroundColor:'yellow'}]}
refreshing={false}
keyExtractor={(item, index) => {
return index.toString()
}}
renderScrollComponent={props=><ScrollView
style={[{height:px2dp(0),backgroundColor:'green'}]}
horizontal={false}
showsVerticalScrollIndicator={false}
refreshControl={
<LottieRefreshControl
ref={ref=>this.pullLayout = ref}
onRefresh={this.refresh}
{...props}
/>
}
/>}
data={this.props.data}
footerState={this.props.refreshState}
loadState={this.props.loadState}
// windowSize={10}
// initialNumToRender={5}
// updateCellsBatchingPeriod={10}
// maxToRenderPerBatch={10}
renderItem={this.renderRowView}
loadMore={this.props.loadMore.bind(this)}
ListEmptyComponent={this._renderLayout.bind(this)}
onEndReached={({distanceFromEnd}) => this._onEndReached(distanceFromEnd)}
onEndReachedThreshold={0.1} // 这里取值0.1（0~1之间不包括0和1），可以根据实际情况
/>;

0.48官方的RCTScrollContentShadowView.m文件是这样

`
#import "RCTScrollContentShadowView.h"

#import <yoga/Yoga.h>

#import "RCTUtils.h"

@interface RCTShadowView () {
// This will be removed after t15757916, which will remove
// side-effects from setFrame: method.
@public CGRect _frame;
}
@EnD

@implementation RCTScrollContentShadowView

• (void)applyLayoutNode:(YGNodeRef)node
  viewsWithNewFrame:(NSMutableSet<RCTShadowView *> *)viewsWithNewFrame
  absolutePosition:(CGPoint)absolutePosition
  {
  // Call super method if LTR layout is enforced.
  if (self.effectiveLayoutDirection == UIUserInterfaceLayoutDirectionLeftToRight) {
  [super applyLayoutNode:node
  viewsWithNewFrame:viewsWithNewFrame
  absolutePosition:absolutePosition];
  return;
  }

  // Motivation:
  // Yoga place contentView on the right side of scrollView when RTL layout is enfoced.
  // That breaks everything; it is completly pointless to (re)position contentView
  // because it is contentView's job. So, we work around it here.

  // Step 1. Compensate absolutePosition change.
  CGFloat xCompensation = YGNodeLayoutGetRight(node) - YGNodeLayoutGetLeft(node);
  absolutePosition.x += xCompensation;

  // Step 2. Call super method.
  [super applyLayoutNode:node
  viewsWithNewFrame:viewsWithNewFrame
  absolutePosition:absolutePosition];

  // Step 3. Reset the position.
  _frame.origin.x = RCTRoundPixelValue(YGNodeLayoutGetRight(node));
  }

@EnD
`

'''

<ScrollView
contentContainerStyle={{ paddingBottom: 100}}
refreshControl={
<MJRefresh
ref={ref=>this._mjrefresh = ref}
onRefresh={
()=>{
this.setState({
text:'正在刷新'
})
console.log('onRefresh')
setTimeout(()=>{
this._mjrefresh && this._mjrefresh.finishRefresh();
},1000)
}
}
onRefreshIdle={()=>console.log('onRefreshIdle')}
onReleaseToRefresh={()=>{
this.setState({
text:'释放刷新'
})
}}
onPulling={e=>{
if(e.nativeEvent.percent<0.1){
this.setState({
text:'下拉刷新'
})
}
}}
>
<View style={{height:100,backgroundColor:'red',
justifyContent:'center',
alignItems:'center',flexDirection:'row'
}}>
{this.state.text}


}
ref={e => this.scrollView = e}
style={{flex:1}}
scrollEnabled={this.state.scrollEnabled} >

                <View
                    style={{
                        height: 200,
                        backgroundColor: 'green',
                        width: Metrics.screenWidth
                    }}
                />
                <View
                    style={{
                        height: 200,
                        backgroundColor: 'blue'
                    }}
                />
                <View
                    style={{
                        height: 200,
                        backgroundColor: 'yellow'
                    }}
                />
                <View
                    style={{
                        height: 200,
                        backgroundColor: 'blue'
                    }}
                />
                <View
                    style={{
                        height: 200,
                        backgroundColor: 'green'
                    }}
                />
            </ScrollView>

container: {
flex: 1,
backgroundColor: '#F5F5F5',
}

如题

#15 #14

这里主要不能继承 scrollview, 导致不支持, 能更新下组件吗?

第一次进去页面，需要beginRefresh。

  componentDidMount(): void {
    if (this.props.initial) {
      this._mjRefresh.beginRefresh()
    }
  }

这是没问题的，但是返回，重新进入（第二次就会报错）

错误信息：
'React/RCTConvert.h' file not found
'React/RCTViewManager.h' file not found
'React/RCTView.h' file not found

版本信息：
"react": "16.6.3",
"react-native": "0.58.6",
"react-native-mjrefresh": "^0.6.5",

报错 requireNativeComponent RCTMJRefreshView was not found in the UIManager 突然就这样了 前几天还行 还有就是在11.4的模拟器能正常 在12.1的模拟器上就会提示 #27 这个

重写flatList的renderScrollComponent之后，下拉动画出来了
但当快速向上，或者向下滚动时，会出现，第一个手势没结束，再去触发第二个手势，会让列表停下，需要再滚动一次

react-native-MJRefresh

#import <React/RCTUIManagerUtils.h> 提示未找到这个文件

RCTMJRefreshHeader/RCTMJRefreshHeader/RCTMJScrollView.m:18:9: 'React/RCTUIManagerUtils.h' file not found

libRCTMJRefreshHeader.a 这个报红 然后项目运行提示no such file or directory:libRCTMJRefreshHeader.a

react-native项目中接入MJRefresh，link完，debug没问题，打包报错：
clang: error: no such file or directory: ‘***/Intermediates.noindex/ArchiveIntermediates/KnowBall/BuildProductsPath/Release-iphoneos/libRCTMJRefreshHeader.a’

按#11的办法，将 RCTMJRefreshHeader lib 加入 Build Phases -> Target Dependencies 中，并将Build Phases -> Link Binary With Libraries中的libRCTMJRefreshHeader.a删掉。

打包是成功了，然而运行起来出问题了。

2019-06-21 09:23:44.070 [error][tid:com.facebook.react.JavaScript] Invariant Violation: requireNativeComponent: "RCTMJRefreshView" was not found in the UIManager.

This error is located at:
in RCTMJRefreshView

然后找到"RCTMJRefreshView" was not found in the UIManager解决方案里，解决方法是把libRCTMJRefreshHeader.a加到Link Binary With Libraries里，
大哥我就是这一步错了才搞到Target Dependencies里的，你这不就死循环了吗？

到底有没有一个完整的解决方案？

项目环境： target最低支持9.0, react-native:0.57.8
测试环境： iOS12.1.4 真机

可以和安卓的这个库一起使用吗react-native-SmartRefreshLayout，用Platform区分使用，我两个都引入了，在IOS build成功没报错但是一直跑不起来，不知道是不是和其他什么库有冲突

这个小bug能不能优化下，thanks！

react-native-mjRefresh 设置contentContainerStyle没有用;
react-native version: 0.48.0

error: bundling failed: Error: Unable to resolve module react-native/Libraries/Lists/MetroListView from /Users/hubin/Desktop/react-native/app/toutiao/node_modules/react-native-mjrefresh/MJMetroListView.js: Module react-native/Libraries/Lists/MetroListView does not exist in the Haste module map

上拉加载更多方法onEndReached无法触发

真机打包之后，无法显示下拉刷新的控件，而且各种阻塞事件 我在模拟器上运行很正常 但是在真机上有很多问题

这个是错误截图

直接闪退 9.0-10.0的版本不知道

RN 0.61.5 使用 MJScrollView 时，调用 scrollTo scrollToOffset 等方法时报错
RN 0.59.10 使用 MJScrollView 正常
RN 0.61.5 使用自带的 ScrollView 正常

"MJScrollViewManager.zoomToRect was called with 4 arguments but expects 3 arguments. If you haven't changed this method yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away."

通过修改 react-native/Libraries/Components/ScrollResponder.js

    UIManager.dispatchViewManagerCommand(
      nullthrows(this.scrollResponderGetScrollableNode()),
      UIManager.getViewManagerConfig('RCTScrollView').Commands.scrollTo,
      [x || 0, y || 0, animated !== false],
    );

发现方法调用错乱
调 scrollTo 会执行 zoomToRect
调 scrollToEnd 会执行 flashScrollIndicators
调 flashScrollIndicators 会执行 scrollToEnd

代码如下

android版使用没有问题，ios版本报错如下，是否必须要使用封装的flatlist或者scrollview?
rn版本0.63.2 ios版本13.3

话说你们有遇到过这个问题么？ReactClassInterface: You are attempting to define UNSAFE_componentWillMount on your component more than once. This conflict may be due to a mixin

我看RN源码 ScrollView.js 里面创建的类还是用的旧的方法。但是新的react是不支持mixin了。所以不是很清楚，它是怎么做到兼容新的类。
请问你们有遇到过这个问题么？ 如何解决呢？
或者对这个问题有什么看法吗？

"react": "16.0.0"
"react-native"： "0.55.3"

"react-native": "0.60.4",

我看示例是ScrllowVIew的，不晓得是否支持FlatList

错误原因：#import xxx.m之类的错误，改为.h。
错误文件：ios->RCTMJRefreshHeader->RCTMJRefreshHeader->RCTMJRefreshViewManager.m文件

as title.

抽取相同的方法和属性，是可以实现的

打包会出错，找不到libRCTMJRefreshHeader.a

解决办法： 将 RCTMJRefreshHeader lib 加入 Build Phases -> Target Dependencies 中

按demo实例代码写的报错，在源码中加了constructor方法仍然报错

问题： 如何可以去掉这段空白？(调试了很久，一直没有找到原因，请大佬指教一下^ ^)
如图：

代码：

// js
import ScrollView from '../../components/MMScrollView'

export default class Chat extends Component {
  render() {
    return (
      <ScrollView
        style={{ flex: 1, backgroundColor: 'yellow' }}
        refreshControl={<MMRefreshControl />}
        reqRefresh={() => {}}
      >
        <View style={{ height: 800, backgroundColor: 'rgba(0, 0, 0, 0.2)', justifyContent: 'center' }}>
          <Text>我是正文我是正文</Text>
          <Text>我是正文我是正文</Text>
          <Text>我是正文我是正文</Text>
          <Text>我是正文我是正文</Text>
        </View>
      </ScrollView>
    )
  }
}

...
...
const RCTMMRefreshView = requireNativeComponent('RCTMMRefreshView', MMRefreshControl)

export default class MMRefreshControl extends Component {
  render() {
    const { onHeaderPulling, onHeaderReleasing, ...props } = this.props
    const nativeProps = { ...props,
      ...{
        onMMRefresh: this._onRefresh,
        onMMPulling: this._onPulling,
        onMMReleaseToRefresh: this._onReleaseToRefresh,
        onMMRefreshIdle: this._onMMRefreshIdle,
        
      }
    }
    return (
      <RCTMMRefreshView
        ref={ref => this.refreshViewRef = ref}
        {...nativeProps}
      >
        <View style={{ height: 130, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center' }}><Text>我是refreshControl</Text></View>
      </RCTMMRefreshView>

    )
  }
}

// Object-C 
// RCTMMRefreshViewManager.m
...
...

-(UIView *)view
{
    header=[RCTMMRefreshHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
    return header;
}

...
...

// RCTMMRefreshHeader.h
@interface RCTMMRefreshHeader : MJRefreshHeader


// MJRefresh/Base/RefreshComponent.h
#import <React/RCTView.h>
#import <React/UIView+React.h>

// MMScrollView 这个控件和 RN 内置的ScrollView 没什么很大变化
// MMScrollView.m   
...
#import "MJRefresh.h"

...
...
- (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
{
  ...
  if ([view isKindOfClass:[MJRefreshHeader class]]){
    _scrollView.mj_header = (MJRefreshHeader *)view;
  }
}
...
...

我们只做了 link 操作。

重写flatList的renderScrollComponent之后，下拉动画出来了
但当快速向上，或者向下滚动时，会出现，第一个手势没结束，再去触发第二个手势，会让列表停下，需要再滚动一次

RCTScrollView.m 里找到这个方法

• (void)handleCustomPan:(__unused UIPanGestureRecognizer *)sender
  {
  //改动地方在这里
  if ([self _shouldDisableScrollInteraction] && ![NSStringFromClass([RCTUIManager JSResponder].class) isEqualToString:@"RCTScrollView"]) {
  self.panGestureRecognizer.enabled = NO;
  self.panGestureRecognizer.enabled = YES;
  // TODO: If mid bounce, animate the scroll view to a non-bounced position
  // while disabling (but only if stopScrollInteractionIfJSHasResponder was
  // called during a pan). Currently, it will just snap into place which
  // is not so bad either.
  // Another approach:
  // self.scrollEnabled = NO;
  // self.scrollEnabled = YES;
  }
  }