React Native 自定义按钮样式问题答案

【问题标题】：React Native custom button styling issueReact Native 自定义按钮样式问题
【发布时间】：2019-02-06 00:29:38
【问题描述】：

我正在通过 TouchableOpacity 设计自定义按钮以响应本机。到目前为止，我尝试了不同的样式方法，但没有得到所需的设计。下面提到的是我尝试解决的问题。

<TouchableOpacity style={styles.numericButton}>
      <View>
          <Text style={styles.numericButtonText}>1</Text>
      </View>
</TouchableOpacity>


const styles = StyleSheet.create({

    numericButton: {
        margin:10,
        padding:10,
        backgroundColor:'#D3D3D3',
        borderColor:'#000',
        borderWidth:2,
        borderRadius:5,
        elevation:10,
        shadowOffset: { width: 5, height: 5 },
        shadowColor: "black",
        shadowOpacity: 1,
        shadowRadius: 5,

    },
    numericButtonText:{
        fontSize:24,
        fontWeight:'bold',
        fontFamily:'Cochin'
    }
});

结果：

我想像这样设计我的 react native 按钮

【问题讨论】：

React Native 的样式功能非常有限，实现这种照明效果的唯一方法可能是使用图像
@kai 你能推荐我任何可以在 react native 中提供这种样式的第三方库吗？
React Native 不提供渐变。有图书馆供您使用。 react-native-liner-gradient github.com/react-native-community/react-native-linear-gradient 不过，我也推荐使用 image。

标签： react-native react-native-stylesheet

【解决方案1】：

我们可以用react-native-linear-gradient实现同类型的按钮

??通过以下方式实现：

            <TouchableOpacity>
                <LinearGradient
                    // start={{x: 0.5, y: .5}} end={{x: 1, y: 1.0}}
                    style={styles.button}
                    locations={[0.3, 0, 0]}
                    colors={['#A8AFB5', 'white', 'white']}
                >
                     <Text style={styles.buttonText}>{props.data}</Text>
                </LinearGradient>
            </TouchableOpacity>




 const styles = StyleSheet.create({

    button: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 5, width: null, height: 81,marginTop:5, borderWidth: 1 },
    buttonText: {
        //textAlign:'center',
        fontSize: 24,
        fontWeight: 'bold',
        fontFamily: 'Cochin',
        color: 'black'
    }
});

【讨论】：

【解决方案2】：

使用以下样式并使用更多渐变来设置与设计匹配的颜色并检查反映的变化

numericButton: {
  alignItems: 'center',
  margin: 10,
  padding: 10,
  backgroundColor: '#D3D3D3',
  borderColor: '#000',
  borderWidth: 2,
  //borderRadius:5,
  elevation: 5,
  shadowOffset: { width: 5, height: 5 },
  shadowColor: 'grey',
  shadowOpacity: 1,
  shadowRadius: 5,
},
numericButtonText: {
  fontSize: 24,
  fontWeight: 'bold',
  fontFamily: 'Cochin',
},

你可以走了！

【讨论】：

其代码相同，略有改动。你知道吗，如何制作带有灯光效果的自定义按钮？
您可以使用 TouchableHighlight。供参考使用this