javascript - 通过prop在自定义组件中的动态文本

午安窥视，
我目前正在努力在自定义组件中显示动态创建的文本，可以说是一个按钮。

在调用页面中，我将添加

const CustomButtonText= ' Here is text made from ' + (some function result or passed json data)
<CustomButton title={CustomButtonText} onPress={() => {}}></CustomButton>

在自定义组件中，我们将使用...

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
import AppSettings from '../constants/AppSettings'
import Colours from '../constants/Colours';
/**
 * Custom button
 *
 * Usage:
 * ```js
 * <CustomButton title='Your button text' onPress={()=>{function to call here}}>
      <MaterialCommunityIcons name="chevron-right-circle" size={40} style={{color:Colours.PrimaryButtonText}} />
  </CustomButton>
 * ```
 * @constructor
 * @param {string} title - string shown within the button.
 * @param {Component} children - Icon element to be displayed.
 * @param {func} onPress - Function to run when button is pressed.
 * @augments {Component<Props, State>}
 */
class CustomButton extends Component{
  static propTypes = {
    /** blank for standard button or error for error button type. */
    ButtonType: PropTypes.string,
    /** string shown within the button. */
    title: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.shape({}),
      PropTypes.func,
    ]).isRequired,
    /** Icon component to display */
    children: PropTypes.oneOfType([
      PropTypes.element,
    ]),
    /** Custom styling for button */
    style: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.number,
      PropTypes.shape({}),
    ]),
    /** Custom styling for button text */
    textStyle: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.number,
      PropTypes.shape({}),
    ]),
    /** Function to call when button is pressed */
    onPress: PropTypes.func,
  }

  render = () => {
    const { ButtonType, textStyle, style, title, children, onPress } = this.props;
        return (
          <TouchableOpacity activeOpacity={0.6} onPress={onPress}>
            <View style={{ ...styles.button, ...style }}>
              {children}<Text style={{...styles.buttonText, ...textStyle}}>{title}</Text>
            </View>
          </TouchableOpacity>
  }
};
const styles = StyleSheet.create({
  button: {
    alignItems:'center',
    backgroundColor: Colours.PrimaryButtonBackground,
    paddingVertical: 3,
    paddingHorizontal: 5,
    borderRadius: AppSettings.ButtonRadius,
    flexDirection:'row',
  },
  buttonText: {
    color: Colours.PrimaryButtonText,
    fontFamily: AppSettings.ButtonFont,
    fontSize: AppSettings.ButtonFontSize,
    textAlign: 'center',
    flex:1,
  },
});
export default CustomButton;

但是在呈现按钮时，该按钮将为空白，并且缺少提供的所有内容，我有什么想法要出错吗？

最佳答案

您可以在console.log(this.props.title)之前return()吗？

如果title存在，我认为您的问题在于您的样式