React Native Props {children}

Question

我遇到一个问题，即子内容传递为道具{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上使用带有{children}的道具时，这个组件是正常的

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

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

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

Answer 1

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

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