创建 React Native 组件，通过解构 'props' 参数来呈现组件的标题

Posted 2023-02-16

【中文标题】创建 React Native 组件，通过解构 \'props\' 参数来呈现组件的标题

【英文标题】：Create React Native component which renders title of component by destructuring 'props' argument创建 React Native 组件，通过解构 'props' 参数来呈现组件的标题

【发布时间】：2022-01-22 12:41:57

【问题描述】：

我正在寻找一个按钮组件，它允许组件的使用者输入按钮的标题。我以前见过这项工作，但现在当我尝试运行代码时出现错误。

错误消息：'文本字符串必须在组件内呈现。

AppButton 代码：

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;

输出代码：

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',
  ,
);

【参考方案1】：

从'react-native'而不是'react-native-web'导入。