React Native,Native Android Module在View中添加TextView

时间:2018-06-12 00:40:43

标签: android react-native react-native-native-module

我正在尝试在tutorial video之后在Android上制作React Native的原生模块,但它似乎不完整,我找不到完成它的方法。

我正在尝试显示一个Square,并在该广场内,一个文本作为道具传递。

但我无法在Android上的View中添加TextView。

这是我的 final PackageManager pm = getPackageManager(); final String pn = getPackageName(); PackageInfo pi = null; try { pi = pm.getPackageInfo(pn, 0); } catch (NameNotFoundException e) { //LOG the exception } curVersionCode = pi!=null ? pi.versionCode:-1;

SquarePackage.java

这是我的SquareManager.java

public class SquarePackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.<ViewManager>singletonList(new SquareManager());
    }
}

到目前为止,我只有一个蓝色的方块。我是在正确的方式吗?

1 个答案:

答案 0 :(得分:1)

我设法让它成功。诀窍是使用LinearLayout,但我不知道这是否是正确的做法......

public class SquareManager extends SimpleViewManager<LinearLayout> {
    public static final String REACT_CLASS = "Square";

    private LinearLayout linearLayout;
    private TextView textView;

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected LinearLayout createViewInstance(ThemedReactContext reactContext) {
      linearLayout = new LinearLayout(reactContext);
      linearLayout.setBackgroundColor(Color.BLUE);
      textView = new TextView(reactContext);
      textView.setTextColor(Color.WHITE);
      linearLayout.addView(textView);
      return linearLayout;
}

    @ReactProp(name = "text")
    public void setTextProp(View view, String prop) {
         textView.setText(prop);
    }
}