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

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

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

【讨论】：