Jameson's Blog

for the dream


  • Home

  • Archives

  • Tags

  • Search
close

Android集成React Native实现多Tab页

Posted on 2016-11-07

添加依赖配置

在project build.gradle中添加:

allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
    ...
}

在app build.gradle中添加:

dependencies {
    ...
    compile "com.facebook.react:react-native:+" // From node_modules.
}

AndroidManifest.xml中添加

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

<application>
    ...
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    ...
</application>

集成ReactApplication

自定义Application,实现ReactApplication接口

public class MyApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

 @Override
        protected String getBundleAssetName() {
            return super.getBundleAssetName();
        }

        @Override
        protected String getJSBundleFile() {
            return super.getJSBundleFile();
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

}

Activity启动RN

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RNSample";
    }
}

Fragment启动RN

android fragment中包含RN,FaceBook没有实现ReactFragment,需要我们自己实现,代码也很简单

public abstract class ReactFragment extends Fragment {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    // This method returns the name of our top-level component to show
    public abstract String getMainComponentName();

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        mReactRootView = new ReactRootView(context);
        mReactInstanceManager = ((MyApplication) getActivity().getApplication()).getReactNativeHost().getReactInstanceManager();
    }

    @Override
    public ReactRootView onCreateView(LayoutInflater inflater, ViewGroup group, Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        return mReactRootView;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mReactRootView.startReactApplication(
                mReactInstanceManager,
                getMainComponentName(),
                null
        );
    }
}

其他Fragment页面嵌入RN只要继承ReactFragment就行了,如

public class TabAppFragment extends ReactFragment {
    @Override
    public String getMainComponentName() {
        return "TabApp";
    }
}

android显示多个RN页面

假设有个需求,android页面某几个Tab要用RN来实现,效果如下,怎么做?

很简单,只要定义不同的Fragment就行了

TabAppFragment.java

public class TabAppFragment extends ReactFragment {
    @Override
    public String getMainComponentName() {
        return "TabApp";
    }
}

TabWorkFragment.java

public class TabWorkFragment extends ReactFragment {
    @Override
    public String getMainComponentName() {
        return "TabWork";
    }
}

RN端index.android.js 重点在于AppRegistry.registerComponent是可以注册多个Component的,很多人忽略了这个以为RN只有一个入口。

export class TabWork extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native TabWork!
        </Text>
      </View>
    );
  }
}


export class TabApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native TabApp!
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('TabWork', () => TabWork);
AppRegistry.registerComponent('TabApp', () => TabApp);

Reference

https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

使用RecyclerView实现Gallery画廊效果

Posted on 2016-09-02

先贴图

要实现上面的画廊效果,传统通过ViewPager clipChildren置为false实现。网上很多教程这个不多说,现在说说用RecyclerView实现上面的效果。这个效果分两步:

  1. ViewPager滑动最终居中停止
  2. 滑动过程中缩放
Read more »

LinearSnapHelper源码解析

Posted on 2016-09-01

Google最新发布的Support RecyclerView包更新到24.2.0,这次来聊聊RecyclerView的新特性和SnapHelper的关系。

一句话介绍SnapHelper: SnapHelper是RecyclerView功能的一种拓展,使RecyclerView滑动行为类似ViewPager,无论怎么滑动最终停留在某页正中间。ViewPager一次只能滑动一页,RecyclerView+SnapHelper方式可以一次滑动好几页,且最终都停留在某页正中间。非常实用和酷炫。
SnapHelper的实现原理是监听RecyclerView.OnFlingListener中的onFling接口。LinearSnapHelper是抽象类SnapHelper的具体实现。

Read more »

ViewPager卡顿优化实战

Posted on 2016-08-15

应用UI卡顿常见原因主要在以下几个方面:

  1. 人为在UI线程中做轻微耗时操作,导致UI线程卡顿;

  2. 布局Layout过于复杂,无法在16ms内完成渲染;

  3. 同一时间动画执行的次数过多,导致CPU或GPU负载过重;

  4. View过度绘制,导致某些像素在同一帧时间内被绘制多次,从而使CPU或GPU负载过重;

  5. View频繁的触发measure、layout,导致measure、layout累计耗时过多及整个View频繁的重新渲染;

  6. 内存频繁触发GC过多(同一帧中频繁创建内存),导致暂时阻塞渲染操作;

  7. 冗余资源及逻辑等导致加载和执行缓慢;

Read more »
依然Fantacy

依然Fantacy

An Developer's self-improvement

4 posts
3 tags
github weibo zhihu
Links
  • ohmer
  • 土豪龙
  • 土豪铎
  • 土豪中土豪
© 2016 依然Fantacy
Powered by Hexo
Theme - NexT.Mist