反应原生道具 {children}答案

【问题标题】：React Native Props {children}反应原生道具 {children}
【发布时间】：2018-02-11 12:42:30
【问题描述】：

我有一个问题，即作为道具 {children} 传递的子内容有时不会在我的组件中呈现。

Button.js

import React from 'react';
import {Text, TouchableOpacity} from 'react-native';

const Button = ({onPress, children}) => {
    const {buttonStyle, textStyle }  = styles;
    return (
        <TouchableOpacity onPress={onPress} style={buttonStyle} >
            <Text style={textStyle}> {children} </Text>
        </TouchableOpacity>
    );
};

const styles = {
    textStyle: {
      alignSelf: 'center',
      color: "#fff",
      fontSize: 16,
      fontWeight: '600',
      paddingTop: 10,
      paddingBottom: 10
    },
    buttonStyle:{
        flex: 1,
        alignSelf: 'stretch',
        backgroundColor: '#ff5763',
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#ff6555',
        marginLeft: 5,
        marginRight: 5
    }
};

export { Button };

当我在 LoginForm 上将此组件与 props {children} 一起使用时就可以了

<Button onPress={this.onButtonPress.bind(this)}>
    Log In
</Button>

但是当我想在 app.js 中使用空按钮时；/

<Header textHeader={'Authentication'}/>
    <Button>
        Blablabla
    </Button>

【问题讨论】：

您的具体问题是什么？您刚刚发布了代码和屏幕
问题是:) 为什么在 app.js 中使用带有铭文的 Button 组件时 - 字符串没有传递和显示？
看起来按钮在那里，但您的样式设置可能使其没有高度。

标签： javascript reactjs react-native

【解决方案1】：

很可能值已正确传递，但按钮未正确呈现。您的 Button 样式没有明确定义高度，而是使用基于父容器的 flex: 1。

检查父组件的样式属性以确保它具有有效的高度，或向按钮添加显式的最小高度。

【讨论】：