javascript - 作为子项添加时，以不同方式 react native 组件呈现

Question

我有以下基本组件，它以 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',
  },
});

我已经测试过它并且工作正常，但是当我尝试在我的一个屏幕上使用它时，我会得到不同的结果，具体取决于按钮添加到我的屏幕层次结构的深度。

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,
  },
});

其中 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)',
  },
});

这会产生以下输出:

如您所见，尽管以相同方式添加了 3 组按钮，但在 View 下添加的按钮(样式化和非样式化)呈现方式不同。此外，未呈现的按钮不可点击

对于组件的深度是否有一些限制或者我在这里不知道的东西？鉴于所有按钮上的文本元素都是白色的，至少某种程度的样式仍然适用于按钮。

感谢您提供的任何帮助

Answer 1

您可能需要将 flex:1 赋予渐变按钮的父 View 。

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

同时添加 bottomRow 样式。

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