[英]How to add multiple components in React Native?
注意:我是React Native的新手,已經搜索了如何執行此操作,但是沒有發現有用的結果,我正在使用React Native來創建應用程序,並希望添加多個組件,例如文本,按鈕和文本輸入空間,但是在沒有收到錯誤的情況下遇到麻煩。 有什么方法可以使用React Native將多個組件包含到一個javascript文檔中嗎?
我目前擁有的代碼:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Text style={styles.bigblack}>Sample Bold Text Here</Text>
<Text>Sample Text Here:</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblack: {
color: 'black',
fontWeight: 'bold',
fontSize: 28,
},
red: {
color: 'red',
},
container: {
flex: 1,
backgroundColor: '#fdf5e6',
alignItems: 'center',
justifyContent: 'center',
},
});
我要為文本輸入添加的代碼:
class UselessTextInput extends Component {
render() {
return (
<TextInput
{...this.props}
editable = {true}
maxLength = {40}
/>
);
}
}
export default class UselessTextInputMultiline extends Component {
constructor(props) {
super(props);
this.state = {
text: 'Useless Multiline Placeholder',
};
}
render() {
return (
<View style={{
backgroundColor: this.state.text,
borderBottomColor: '#000000',
borderBottomWidth: 1 }}
>
<UselessTextInput
multiline = {true}
numberOfLines = {4}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</View>
);
}
}
我要為Button添加的代碼:
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this button"
/>
您可以在同一文檔中創建多個組件,但只能export default
組件。
因此,您可以創建多個組件,如下所示:
export class UselessTextInput {}
export class UselessTextInputMultiline {}
export class Button {}
在訪問時:
import {UselessTextInput, UselessTextInputMultiline, Button} from './components/customInput' // change with your respective path
如果您仍然希望具有單個export default
則:
export default class UselessTextInputMultiline {}
並且在導入時
import Template,{Button} from './components/customInput'
對於,導出多個組件:
module.exports = {
text: UselessTextInput,
btn: Button
}
進口將像:
let txtInput= require('./components/customInput').text;
let btnInput = require('./components/customInput').btn;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.