创建自定义按钮反应原生答案

【问题标题】：Creating a Custom Button react native创建自定义按钮反应原生
【发布时间】：2021-07-30 06:54:39
【问题描述】：

我正在尝试在具有一些默认样式的 react native 中创建一个自定义按钮，但我希望该按钮允许我根据情况更改其默认样式以用于新样式。

代码是这样的：

import React from 'react';
import {StyleSheet, TouchableOpacity, Text} from 'react-native';

export default function custom_button({txt, onPress}){
    return(
        <TouchableOpacity style={styles.container} onPress={onPress} >
            <Text style={styles.text}>{txt}</Text>
        </TouchableOpacity>
    )
}
const styles = StyleSheet.create({
    container:{
        backgroundColor:'#3F51B5',
        padding:10,
        margin:20,
        width:'80%',
        borderRadius:15,
        alignItems:'center'
    },
    text:{
        fontWeight:'bold', 
        color:'white', 
        fontSize:16
    }
});

我需要一个英雄

【问题讨论】：

标签： reactjs react-native movilizer

【解决方案1】：

这是一个非常简单的实现：

import React from 'react';
import {StyleSheet, TouchableOpacity, Text} from 'react-native';

export default function custom_button({txt, onPress, txtStyle, buttonStyle}){
    return(
         <TouchableOpacity style={[styles.container1,buttonStyle && buttonStyle]} onPress={onPress} >
            <Text style={[styles.text1,txtStyle && txtStyle]}>{txt}</Text>
        </TouchableOpacity>
    )
}
const styles = StyleSheet.create({
    container:{
        backgroundColor:'#3F51B5',
        padding:10,
        margin:20,
        width:'80%',
        borderRadius:15,
        alignItems:'center'
    },
    text:{
        fontWeight:'bold', 
        color:'white', 
        fontSize:16
    }
});

还为您创建了snack。您可以在这里进行试验和玩耍。

【讨论】：

【解决方案2】：

你可以为类似的用途制作一个全局样式，当你需要修改样式时你可以这样做 style={[styles.container,{在此处添加您要修改的内容}]} 我希望这能帮助你解决你的问题

【讨论】：

【解决方案3】：

您应该从 react native 中查看“按钮”。确保从 'react-native' 导入 { Button }；

这是一个例子：

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

我也同意 Faris 的回答，你可以创建全局样式。只需将样式从容器/文本更改为其他样式

查看这里了解更多信息https://reactnative.dev/docs/button

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
我更新了答案，它不再只是一个链接