react-native - React Native、Ionic、Flutter 和 NativeScript 中的代码可重用性(一次编写，随处使用)

Question

我第一次在这里写这种问题，如果我的问题不好，请原谅。

我正在学习一些新的跨平台框架。我对 Ionic(版本 4)、Flutter、React Native 和 NativeScript 很感兴趣。准确地说，我想了解每个框架的代码可重用性的概念。他们如何应用可重用性？在哪个矩阵中，结果是什么？

谢谢。

Answer 1

在 react-native 中，您可以创建任何组件使用任何屏幕。例如，我使用 InputText 组件来实现可重用性。

InputField.js

import React, { Component } from "react";
import { TextInput, View, StyleSheet, Text,Image } from "react-native";

export class InputField extends Component {
  render() {
    const {
      textentry,
      keytype,
      isvalid,
      errormsg,
      returnkey,
      textplaceholder,
      underlinecolor,
      onchangetext
    } = this.props;
    return (
      <View>
        <TextInput
          style={styles.input}
          placeholder={textplaceholder}
          keyboardType={keytype}
          placeholderTextColor="#ffffff"
          underlineColorAndroid={underlinecolor}
          secureTextEntry={textentry}
          ref={(input) => this.props.inputRef && this.props.inputRef(input)}
          returnKeyType={returnkey}
          blurOnSubmit={false}
          onSubmitEditing={(event) => {
            if (returnkey != 'done') {
                this.props.onSubmitEditing(event)
            }
        }}
          onChangeText={text => {
            this.props.onText(text);
          }}
        />
        <View>
          {!isvalid ? (
            <Text style={styles.errormsg}>{errormsg}</Text>
          ) : null}
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  input: {
    width: 300,
    color: "#ffffff",
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center"
  },
  errormsg: {
    color: "#ff0000",
    marginLeft: 60
  },
});
export default InputField;

使用这个InputField组件进行筛选Myscreen.js

import React, { Component } from "react";
import {
  View,
  StyleSheet
} from "react-native";
import { InputField } from "../component/InputField";
 render() {
    return (
<View style={{flex:1}}>
<InputField
            keytype="default"
            textplaceholder="Enter First Name"
            textentry={false}
            returnkey="next"
            isvalid={this.state.firstNameValid}
            errormsg={this.state.errormsgtext}
            underlinecolor={this.state.underLineColorFirstName}
            onText={text => {
              this.setState({ firstName: text });
            }}
            onSubmitEditing={event => {
              this.inputs["phone"].focus();
            }}
          />
</View>
)}}