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

Answer 2

关于React Native，它可以与Components一起使用。您可以为您可以想象的每件事创建一个组件。拥有组件的最好之处在于它们是可重用的。例如，我可以在组件中创建一个按钮，然后将同一按钮导出到其他应用程序或屏幕。

Answer 3

在这里谈论有关NativeScript的Web和Mobile之间的代码共享：

免责声明：我是NativeScript团队的成员

首先只能通过Angular实现，如果您更喜欢使用纯JS或TypeScript，则没有代码共享
在Web，iOS和Android之间共享的代码的第二部分取决于应用程序的功能。这意味着，如果您在UI和逻辑背后的代码上都严重依赖于平台特定的功能，则可能无法实现完整的代码共享，但是有一些方法可以克服这种情况，并再次共享公共服务。 li>
与NativeScript共享代码的第三种想法是，如果您具有用于“平台”（Web，iOS和/或Android）的特定代码，则只需创建具有特定文件名的其他文件即可。例如，如果您有一个名为home.component.ts的Angular组件，则应该有一个文件包含Web部件的HTML，一个包含移动部件的HTML，因此您只需创建home.component.html和home.component.tns.html。类似的方法也用于其他非组件文件，例如css和angular服务等。

在NativeScript中使用Web实现代码共享的技术是使用专门用于NativeScript的Angular示意图。

关于如何实现代码共享的确切话题是很多日志，所以我建议您阅读this博客文章，其中介绍了使用NativeSript在Web，iOS和Android之间进行代码共享。对于入门步骤，我建议使用官方文档here。

React Native，Ionic，Flutter和NativeScript中的代码可重用性（一次编写，可在任何地方使用）

3 个答案: