我的btn组件有问题,我使用的是react-native-linear-gradient lib ...
btn.js
tempData[getDay()-1][getMon()-1]=tempStream.str();
app.js
import React,{ Component } from 'react';
import {View,Text,StyleSheet, TouchableOpacity} from 'react-native';
import {Button,Item} from 'native-base';
import LinearGradient from 'react-native-linear-gradient';
class GradientBtn extends Component {
constructor(props){
super(props);
}
render(){
return(
<LinearGradient colors={['#d7d7d7', '#fafafa', '#e8e8e8']}
style={[styles.btnContainer,{height:this.props.h,width:this.props.w}]}>
<Text style={styles.btn}>{this.props.name}</Text>
</LinearGradient>
);
}
}
var styles = StyleSheet.create({
btnContainer:{
backgroundColor:'#f0f0f0',
justifyContent:'center',
marginLeft:1
},
btn:{
textAlign:'center',
color:'#000',
fontWeight:'700',
fontSize:12
}
});
export default GradientBtn;
当我从组件中删除TouchableOpacity标签时,视图就可以了,但是当我放置这个标签时,我希望触摸不透明度btn然后我的视图将压缩意味着宽度并且没有看到正确的btn .. < / p>
答案 0 :(得分:0)
试试这个 -
const GradientBtn = ({ name }) => (
<LinearGradient colors={['#d7d7d7', '#fafafa', '#e8e8e8']} style={styles.gradient}>
<Text style={styles.btn}>{name}</Text>
</LinearGradient>
)
const styles = StyleSheet.create({
gradient: {
flex: 1
}
});
&安培;申请width
&amp; height
本身TouchableOpacity
<TouchableOpacity style={styles.wrapper}>
<GradientBtn name="Login" />
</TouchableOpacity>
const styles = StyleSheet.create({
wrapper: {
width: '24.55%',
height: 35
}
});
虽然没试过,但我想它会起作用:)
答案 1 :(得分:0)
晚于此答案,但似乎您根本没有在flex: 1
上使用Touchable Opacity
。或者,您可以将高度和宽度放在TouchableOpacity
上,而不是像建议的@ deadcoder0904一样。
这里是一个Gradient Button component library,可以轻松在React Native中使用渐变按钮。
答案 2 :(得分:0)
Use https://www.npmjs.com/package/react-native-linear-gradient
<LinearGradient colors={['#FF00FF', '#FFF000', '#FF0000']}
style={{borderRadius: 20, width: width/3}}
start={{ y: 0.0, x: 0.0 }} end={{ y: 0.0, x: 1.0 }}>
<Button style={{borderRadius: 20, width: width/3,
textAlign: 'center', color: '#fff'}} title={`Welcome`}/>
</LinearGradient>
或
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}
style={styles.linearGradient}
start={{ y: 0.0, x: 0.0 }} end={{ y: 0.0, x: 1.0 }}>
<Text style={styles.buttonText}> Done </Text>
</LinearGradient>
const styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});