[英]Create React Native component which renders title of component by destructuring 'props' argument
I am looking to make a button component which allows the consumer of the component to input the title of the button.我正在寻找一个按钮组件,它允许组件的使用者输入按钮的标题。 I have seen this work before but am now getting an error when I try to run the code.我以前见过这项工作,但现在当我尝试运行代码时出现错误。
Error message: 'Text strings must be rendered within a component.错误消息:'文本字符串必须在组件中呈现。
AppButton code:应用按钮代码:
import React from 'react';
import { StyleSheet, View, Text } from 'react-native-web';
function AppButton({title}) {
return (
<View style={styles.button}>
<Text style={styles.text}>{title}</Text>
</View>
);
}
const styles = StyleSheet.create({
button: {
backgroundColor: "dodgerblue",
borderRadius: 25,
justifyContent: "center",
alignItems: "center",
padding: 15,
width: '100%',
},
text: {
color: "white",
fontSize: 18,
textTransform: 'uppercase',
fontWeight: 'bold',
}
})
export default AppButton;
Output code: Output 代码:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import AppButton from './components/AppButton';
export default function App() {
return (
<View style={styles.container}>
<AppButton title = "Push Me"/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Import from 'react-native'
instead of 'react-native-web'
.从'react-native'
而不是'react-native-web'
导入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.