react圓角 顏色漸變
阿新 • • 發佈:2018-11-27
<TouchableOpacity style={styles.loginButtonViewStyle}> <Text style={styles.loginTextStyle}>登入</Text> </TouchableOpacity> <View style={styles.loginButtonViewStyle2}> <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}> <Text style={styles.buttonText}> 豎向漸變 </Text> </LinearGradient> </View> <View style={styles.loginButtonViewStyle2}> <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#E8E8D9', '#B3D9D9', '#AE57A4']} style={styles.linearGradient}> <Text style={styles.buttonText}> 橫向漸變 </Text> </LinearGradient> </View>
const styles = StyleSheet.create({ container:{ flex:1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }, rowStyle:{ width:width*0.8, flexDirection:'row', justifyContent:'center', height:44, borderBottomWidth: 0.5, // borderBottomColor:this.state.wzTextInput?'green': 'gray', //報wzTextInput沒定義 marginLeft:10, marginRight:10, }, leftViewStyle:{ flex:1, flexDirection:'row', justifyContent:'center', alignItems: 'center' }, imageStyle:{ width:20, height: 20, tintColor:'green', marginLeft: 5 }, inputStyle:{ flex:1, height:44, }, rightTextStyle:{ width:50, justifyContent:'flex-end', alignItems:'center' }, loginTextStyle:{ fontSize:24, color:'white' }, loginButtonViewStyle:{ width:width*0.8, flexDirection:'row', justifyContent:'center', alignItems:'center', height:44, marginTop:40, marginLeft:10, marginRight:10, backgroundColor:'green', borderRadius:20 }, loginButtonViewStyle2:{ width:width*0.8, flexDirection:'row', justifyContent:'center', alignItems:'center', height:44, marginTop:40, marginLeft:10, marginRight:10, borderRadius: 5, }, linearGradient: { flex: 1, paddingLeft: 15, paddingRight: 15, borderRadius: 5 }, buttonText: { fontSize: 18, fontFamily: 'Gill Sans', textAlign: 'center', margin: 10, color: '#ffffff', backgroundColor: 'transparent', }, });