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',
},
});
我已经测试过,它工作正常,但是当我尝试在我的一个屏幕上使用它时,我会得到不同的结果,这取决于按钮添加到我的屏幕层次结构的深度。
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 组按钮,但在视图下添加的按钮(样式化和非样式化)的呈现方式不同。此外,未呈现的按钮不可点击
组件的深度是否有一些限制,或者我在这里不知道的东西?鉴于所有按钮上的文本元素都是白色的,至少有一定程度的样式仍然适用于按钮。
感谢您提供的任何帮助
解决方案
您可能需要将 flex:1 赋予渐变按钮的父视图。
<View style={{flex:1}}>
<GradientButton text="Back" />
<GradientButton text="Next" />
</View>
还将其添加到bottomRow 样式。
buttonRow: {
flex:1,
flexDirection: 'row',
padding: 10,
},
推荐阅读
- c# - 如何使用 Atata 进行基本的自动浏览器检测,然后自动设置驱动程序?我正在阅读文档,但运气不佳
- php - PHP in_array 函数找不到值
- javascript - 有没有办法在不等待的情况下检查直接调用的异步函数
- python - 类型错误:get_orders() 缺少 1 个必需的位置参数:'self' - 连接到数据库并将其转换为 panda 数据框
- xcode - ARKit(ARWorldTrackingConfiguration)定位问题
- python - 梯度下降更新的亚当优化似乎不适用于逻辑回归
- javascript - 对于多租户数据库,将租户 ID 作为 GET 参数传递给 API 是否安全?
- c# - 具有文件和目录组合的 Blazor InputFile 拖放文件上传器
- bash - 如何从文本文件中grep字母数字部分
- sorting - 找出平方最大的数