Question

我正在尝试将材料设计输入添加到React Native，但是不幸的是，它什么也没有渲染，我找不到我想要的东西。

这是我的模块。我传递两个参数并返回TextInputLayout。

public class MaterialTextInputModule extends SimpleViewManager<TextInputLayout> {
@Nonnull
@Override
public String getName() {
    return "MaterialTextInput";
}

@Nonnull
@Override
protected TextInputLayout createViewInstance(@Nonnull ThemedReactContext reactContext) {
    TextInputLayout textInputLayout = new TextInputLayout(reactContext, null, R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox);
    TextInputEditText textInput = new TextInputEditText(textInputLayout.getContext());
    textInputLayout.addView(textInput);
    return textInputLayout;
}

@ReactProp(name="hint")
public void setHint(TextInputLayout textInputLayout, @Nullable String hint) {
    textInputLayout.setHint(hint);
}

@ReactProp(name="outlined")
public void setOutlinedBox(TextInputLayout textInputLayout, Boolean outlined) {
    if (outlined) {
        textInputLayout.setBoxBackgroundMode(TextInputLayout.BOX_BACKGROUND_OUTLINE);
    }
}}

这是我的包类，在其中创建视图管理器：

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

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
        new MaterialTextInputModule()
    );
}}

我还将其作为软件包添加到MainApplication中，然后将其添加到rn应用程序中。然后我就这样使用它

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MaterialTextInput from './MaterialTextInput';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <MaterialTextInput hint={"Hello my first component"} outlined={true}></MaterialTextInput>
      </View>
    );
  }}

这就是我需要一个组件的方式，基本上是MaterialTextInput.js

import {requireNativeComponent} from 'react-native';


module.exports = requireNativeComponent('MaterialTextInput', TextInput);

Answer 1

似乎我找到了答案，这是一个愚蠢的错误。基本上，本机代码没有问题，但是JSX只是一个小错误。重构文件后，我刚刚向刚刚添加的ui组件添加了样式。效果惊人：）

无论如何，RN中的工作代码：

import React, { Component } from 'react';
import { StyleSheet, View, requireNativeComponent } from 'react-native';

const MaterialTextInput = requireNativeComponent("MaterialTextInput")

export default class App extends Component {
  render() {

    return (
      <View style={styles.container}>
        <View style={styles.top} />
        <MaterialTextInput style={styles.bottom} outlined={true} hint={'Hello my first component'} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  top: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  bottom: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

将本机UI组件添加到React Native不会执行任何操作

1 个答案: