Cách Tốt Nhất để Tạo Rebounding ScrollViews trong Ứng dụng React Native Android

React Native ReboundScrollView

hỗ trợ rebound ScrollView trên android, tương thích ios – sử dụng react scrollview

Cách sử dụng

Cách sử dụng

Android

Trong android/setting.gradle

...

include ':app',':ReboundScrollView'
project(':ReboundScrollView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-rebound-scrollview/android/app')

Trong android/app/build.gradle

...
dependencies {
    ...
    compile project(':ReboundScrollView')
}

Đăng ký module (trong MainActivity.java)

import com.jg.zhang.scrollview.ReboundScrollViewPackage; // <------ add here


public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  ......

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new ReboundScrollViewPackage(this))       // <------ add here
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ......

}

Các chức năng cơ bản đã được thực hiện, vẫn còn lỗi, sẽ hoàn thiện trong tương lai

Ví dụ

var ArticleDetailView = React.createClass({
    render:function(){

        return(
        <ReboundScrollView>
            <View style={ArticleDetailStyle.container}>
                <View style={ArticleDetailStyle.articleConetent}>
                    <Text style={ArticleDetailStyle.articleText}>
                        In iOS, the way to display formatted text is by using NSAttributedString: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.
                    </Text>
                </View>
            </View>
        </ReboundScrollView>
        )
    }
});

Chi tiết tải về:

Tác giả: jaxchow
Nguồn: https://github.com/jaxchow/react-native-rebound-scrollview