您的位置:首页 > Web前端 > React

react-native 添加 Toast 模块

2015-10-27 16:10 609 查看
1.创建一个原生模块开始。一个原生模块是一个通常继承 
ReactContextBaseJavaModule
 类的
Java 类,并且实现了 JavaScript 需要实现的方法

public class AliToastAndroid extends ReactContextBaseJavaModule {

private static final String DURATION_SHORT_KEY = "SHORT";
private static final String DURATION_LONG_KEY = "LONG";

public AliToastAndroid(ReactApplicationContext reactContext) {
super(reactContext);
}

@Override
public String getName() {
return "AliToastAndroid";
}

@Override
public Map<String, Object> getConstants() {
final Map<String, Object> constants = new HashMap<>();
constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
return constants;
}

@ReactMethod
public void show(String message, int duration) {
Toast.makeText(getReactApplicationContext(), message, duration).show();
}
}

注意:


1.ReactContextBaseJavaModule 需要一个叫做 
getName
 的方法被实现。这个方法的目的就是返回在
JavaScript 里面表示这个类的叫做 
NativeModule
 的字符串的名字。在这里我们调用 AliToastAndroid
 因此我们可以在 JavaScript 里面使用 
React.NativeModules.AliToastAndroid 来得到它。
2.一个可选的叫做 
getConstants
 的方法会将传递给
JavaScript 的常量返回。这个方法的实现并不是必须的,但是却对在 JavaScript 和 Java 中同步的预定义的关键字的值非常重要。

3.给
JavaScript 暴露一个方法,一个 Java 方法需要使用 
@ReactMethod
 来注解。桥接的方法的返回值类型总是
void
。React
Native 的桥接是异步的,因此将一个结果传递给 JavaScript 的唯一方式就是使用回调函数或者调用事件

2.注册模块:

public class AnExampleReactPackage extends MainReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = super.createNativeModules(reactContext);

//new an Array intstead of abstract List exception
List<NativeModule> result = new ArrayList<>();
result.addAll(modules);

4000
result.add(new AliToastAndroid(reactContext));
return result;
}
}
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new AnExampleReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();


3.在你的 JavaScript 文件里面你可以像下面这样调用方法:
var AliToastAndroid = React.NativeModules.AliToastAndroid

    AliToastAndroid.show('444444', AliToastAndroid.LONG);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  react-native 模块