反应原生渐变按钮答案

【问题标题】：react native gradient button反应原生渐变按钮
【发布时间】：2018-05-07 20:46:28
【问题描述】：

我的 btn 组件有问题，我正在使用 react-native-linear-gradient lib...

btn.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;

app.js

<View style={{flexDirection:'row',justifyContent:'space-between',marginTop:5}}>
    <TouchableOpacity>
        <GradientBtn h={35} w={'24.55%'} name="Open Corrective"/>
    </TouchableOpacity>
    <TouchableOpacity>
        <GradientBtn h={35} w={'24.55%'} name="Open Corrective"/>
    </TouchableOpacity>
    <TouchableOpacity>
        <GradientBtn h={35} w={'24.55%'} name="Open Corrective"/>
    </TouchableOpacity>
    <TouchableOpacity>
        <GradientBtn h={35} w={'24.55%'} name="Open Corrective"/>
    </TouchableOpacity>
</View>

当我从组件中删除 TouchableOpacity 标记时，视图会正常，但是当我放置此标记时我希望在该 btn 上触摸不透明度，然后我的视图将压缩意味着宽度并且没有看到正确的 btn..

【问题讨论】：

您可能还想尝试在TouchableOpacity 上使用flex: 1，作为参考，这是我的组件库：github.com/thomaswangio/react-native-gradient-buttons

标签： javascript reactjs button react-native

【解决方案1】：

使用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',
  },

});

【讨论】：

【解决方案2】：

试试这个 -

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 和height 应用于TouchableOpacity 本身

<TouchableOpacity style={styles.wrapper}>
  <GradientBtn name="Login" />
</TouchableOpacity>

const styles = StyleSheet.create({
  wrapper: {
    width: '24.55%', 
    height: 35
  }
});

虽然没有尝试过，但我想它会起作用:)

【讨论】：

【解决方案3】：

这个答案晚了，但看起来你根本没有在Touchable Opacity 上使用flex: 1。或者你可以把高度和宽度放在TouchableOpacity。

这里有一个Gradient Button component library，它可以让你在 React Native 中轻松使用渐变按钮。

【讨论】：