Добавление компонента Native UI в React Native ничего не делает - PullRequest
Новая
       12

Добавление компонента Native UI в React Native ничего не делает

0 голосов
/ 21 апреля 2019

Я пытаюсь добавить материал дизайна материала в 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 и затем требуюнативный компонент в рН приложении.Тогда я просто использую его вот так 

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);

1 Ответ

1 голос
/ 23 апреля 2019

Кажется, я нашел ответ, и какая это была глупая ошибка. В основном, в нативном коде проблем не было, а в JSX просто небольшая ошибка. После рефакторинга файлов я просто добавил стиль в компонент пользовательского интерфейса, который только что добавил. Работает потрясающе:)

В любом случае, рабочий код в 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",
  },
});
...