Dynami c текст в пользовательском компоненте через проп - PullRequest
Новая
       10

Dynami c текст в пользовательском компоненте через проп

0 голосов
/ 27 января 2020

Добрый день, выглядывает, я сейчас пытаюсь отобразить динамически созданный текст в пользовательском компоненте, скажем, кнопку.

На странице вызова я бы добавил 

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;

Но при рендеринге кнопка будет пустой и не будет содержать весь предоставленный контент, есть идеи, где я ошибаюсь?

1 Ответ

1 голос
/ 27 января 2020

Можете ли вы console.log(this.props.title) как раз перед вашим return()?

Если существует title, я думаю, что ваша проблема связана с вашими стилями

...