Question

我正在尝试在react-native中创建我的应用程序按钮，如下所示

我正在使用内置Button反应本地视图，我发现它也不允许更改高度。我想改变高度和预期图像一样圆润。

这就是我按钮的样子：

  <Button
    title="CONTINUE"
    color="#FE434C"
    onPress={() => navigate("EnableNotification")}
  />

Answer 1

所以这就是我通常做的事情

            <TouchableOpacity onPress = {() => {/* do this */}>
                <View style = {{backgroundColor: 'red', alignItems: 'center', 
                                justifyContent: 'center', borderRadius: 15}}
                       >
                    <Text style = {{color: 'white'}}>Button</Text>
                </View>
            </TouchableOpacity>

我发现使用这种方法可以使按钮更具可定制性，但如果你进行一些挖掘，可能会有一个实现类似功能的库（我从未真正发现需要搜索它）。

注意：显然你必须根据自己的喜好调整按钮的高度/宽度。

编辑：我的错误......我把onPress道具放在视野中，我们。

Answer 2

这是我使用TouchableOpacity，Text和StyleSheet轻松设置按钮样式的解决方案：

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

export default class CustomButton extends Component {
  render(){
    return (
      <View style={styles.container}>

        /* Custom Button */
        <TouchableOpacity
          style={styles.customBtnBG}
          onPress={() => {}}  >
          <Text style={styles.customBtnText}>Button</Text>
        </TouchableOpacity>

      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
        justifyContent: "center",
    alignItems: "center"
  },

  /* Here, style the text of your button */
    customBtnText: {
        fontSize: 40,
        fontWeight: '400',
        color: "#fff",
    },

  /* Here, style the background of your button */
    customBtnBG: {
    backgroundColor: "#007aff",
    paddingHorizontal: 30,
    paddingVertical: 5,
    borderRadius: 30
    }
});

Answer 3

<TouchableOpacity onPress = {() => {/* do this */}}>
<View style = {{backgroundColor: 'red', alignItems: 'center', 
                justifyContent: 'center', borderRadius: 15}}
       >
    <Text style = {{color: 'white'}}>Button</Text>
</View>

Answer 4

您可以使用可触摸的不透明度及其支撑边界半径来调整其曲线。

https://facebook.github.io/react-native/docs/touchableopacity

Answer 5

@Ryan Turnbull，好吧，我认为可以使用一些填充和fontSize。

<TouchableOpacity onPress={() => this.onLogin()}>
  <View
    style={{
      backgroundColor: 'black',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 15,
      padding: 15,
    }}>
    <Text style={{color: 'white', fontSize: 20, fontWeight: '800'}}>
      Button
    </Text>
  </View>
</TouchableOpacity>

Answer 6

在 React-native 中，我们可以自定义用户定义的按钮组件并从任何地方调用它。这样我们就可以在整个程序或应用程序中采用结构化的方法。

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

const MyButton = props => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
    >
      <View style={{...styles.buttonStyle, ...props.style,
         backgroundColor:props.buttonColor, 
         borderColor:props.buttonColor}}>
        <Text style={{...styles.TextStyle, ...props.style, 
          color:props.fontColor}}>
          {props.children}
        </Text>
      </View>
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  buttonStyle: {
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 10,
    borderWidth: 2,
  },
  TextStyle: {
    textAlign: "center",
  },
});
export default MyButton;

In style ... 扩展运算符用于集成来自相同组件的所有样式以及通过 props 从父组件传入的样式。

props.children 在这里用于传递按钮标题，以便在按钮上显示标题文本。

当按钮被按下时，不是在按钮内部处理这个按下事件，而是在我们使用这个按钮的组件内部。所以我们在按钮上传递了一个拟合函数引用。

这个 MyButton 按钮组件可以在程序内部的任何地方调用，例如：

<MyButton onPress={() => onPressFunction()}
 buttonColor="red" fontColor="white">Button Title</MyButton>

Answer 7

您可以使用此库https://github.com/APSL/react-native-button在react native中创建可自定义的按钮。

<View>
    <Button
        style={{
            backgroundColor: "#FE434C",
            borderColor: "transparent",
            borderRadius: 20,
            width: 250,
            height: 50,
        }}
        textStyle={{ color: "#FFFFFF" }}
        onPress={() => { }}
    >
        CONTINUE
  </Button>
</View>

如何自定义反应原生的按钮

7 个答案: