Javascript 作为子级添加时，对本机组件渲染的反应会有所不同

我有下面的基本组件，它以LinearGradient作为背景渲染一个TouchableOpacity

import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default class GradientButton extends React.Component {
  render() {
    return (
      <LinearGradient
        style={[styles.linearGradient, styles.btnLogWeight]}
        colors={['#085d87', '#27c7bb']}
        start={{x: 0, y: 1}}
        end={{x: 1, y: 0}}>
        <TouchableOpacity style={[{flex: 1}]} onPress={this.props.onPress}>
          <View style={[{flex: 1}]} />
          <Text style={styles.buttonText}>{this.props.text}</Text>
          <View style={[{flex: 1}]} />
        </TouchableOpacity>
      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  btnLogWeight: {
    margin: 10,
  },
  linearGradient: {
    flex: 1,

    borderRadius: 30,
  },
  buttonText: {
    fontSize: 16,
    textAlign: 'center',

    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});

从“React”导入React；
从“react native”导入{样式表、视图、文本、TouchableOpacity}；
从“反应本机线性渐变”导入LinearGradient；
导出默认类GradientButton扩展React.Component{
render（）{
返回(
{this.props.text}
);
}
}
const styles=StyleSheet.create({
体重：{
差额：10，
},
线性梯度：{
弹性：1，
边界半径：30，
},
按钮文字：{
尺寸：16，
textAlign:'中心'，
颜色：“#ffffff”，
背景色：“透明”，
},
});

我已经测试过了，效果很好，但是当我尝试在我的一个屏幕上使用它时，根据按钮添加到屏幕层次结构的深度，我会得到不同的结果

import React from 'react';
import BaseScreen from 'components/BaseScreen';
import {StyleSheet, View, Text} from 'react-native';
import GradientButton from 'components/GradientButton';

class DataEntryScreen extends React.Component {
  render() {
    return (
      <BaseScreen>
        <View style={[styles.flexExpander]}>
          <Text style={[styles.whiteText]}>{this.props.descc}</Text>
          {this.props.children}
          <View style={[styles.flexExpander]} />

          <GradientButton text="Back" />
          <GradientButton text="Next" />
          <View>
            <GradientButton text="Back" />
            <GradientButton text="Next" />
          </View>
          <View style={[styles.buttonRow]}>
            <GradientButton text="Back" />
            <GradientButton text="Next" />
          </View>
        </View>
      </BaseScreen>
    );
  }
}

export default DataEntryScreen;

const styles = StyleSheet.create({
  whiteText: {
    color: '#e8e8e8',
    fontSize: 20,
  },
  buttonRow: {
    flexDirection: 'row',
    padding: 10,
  },
  flexExpander: {
    flex: 1,
  },
});

从“React”导入React；
从“组件/基本屏幕”导入基本屏幕；
从“react native”导入{样式表、视图、文本}；
从“组件/梯度按钮”导入梯度按钮；
类DataEntryScreen扩展了React.Component{
render（）{
返回(
{this.props.descc}
{this.props.children}
);
}
}
导出默认数据入口屏幕；
const styles=StyleSheet.create({
白皮书：{
颜色：'#e8e8e8'，
尺寸：20，
},
按钮箭头：{
flexDirection:'行'，
填充：10，
},
flexExpander：{
弹性：1，
},
});

其中BaseScreen是一个简单的包装器：

import React from 'react';
import {StyleSheet, SafeAreaView} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

class BaseScreen extends React.Component {
  render() {
    return (
      <LinearGradient
        colors={['#085d87', '#27c7bb']}
        start={{x: 0, y: 1}}
        end={{x: 1, y: 0}}
        style={{flex: 1}}>
        <SafeAreaView style={styles.container}>
          {this.props.children}
        </SafeAreaView>
      </LinearGradient>
    );
  }
}

export default BaseScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    borderRadius: 15,
    borderWidth: 3,
    margin: 5,

    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    borderColor: 'rgba(0, 0, 0, 0.5)',
  },
});

从“React”导入React；
从“react native”导入{StyleSheet，SafeAreaView}；
从“反应本机线性渐变”导入LinearGradient；
类BaseScreen扩展了React.Component{
render（）{
返回(
{this.props.children}
);
}
}
导出默认基本屏幕；
const styles=StyleSheet.create({
容器：{
弹性：1，
填充：10，
边界半径：15，
边框宽度：3，
差额：5，
背景色：“rgba（0,0,0,0.7）”，
边框颜色：“rgba（0,0,0,0.5）”，
},
});

这将产生以下输出：

如您所见，尽管以相同的方式添加了3组按钮，但在视图下添加的按钮（已设置样式和未设置样式）呈现方式不同。此外，未渲染的按钮不可单击

组件的深度有没有限制，或者我在这里没有意识到的？如果所有按钮上的文本元素均为白色，则至少仍有某种程度的样式应用于按钮

---

感谢您提供的任何帮助

您可能需要为渐变按钮的父视图提供flex:1

<View style={{flex:1}}>
      <GradientButton text="Back" />
      <GradientButton text="Next" />
</View>

---

该死，就这么简单。所以我想没有flex:1组件就会内爆。非常感谢，我在这件事上浪费了太多时间

buttonRow: {
    flex:1,
    flexDirection: 'row',
    padding: 10,
  },