В реакции-нативе вы создаете любой компонент, использующий любой экран.например, я использовал компонент 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>
)}}