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

Question

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

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

谢谢。

Answer 1

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

输入字段.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;

使用此输入字段组件进行筛选我的屏幕.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

讨论Web和移动之间关于NativeScript的代码共享，这里有几件事需要了解：

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

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

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

代码共享究竟是如何实现的话题非常有记录，所以我建议你阅读这篇博文，其中介绍了Web，iOS和Android与NativeSript之间的代码共享。对于入门步骤，我推荐此处的官方文档。

Answer 3

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