【问题标题】：React-Native Button style not workReact-Native Button 样式不起作用
【发布时间】：2019-01-12 03:12:28
【问题描述】：

Import_this

import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';

这是我的 React Button 代码，但样式不起作用 Hare ...

<Button
  onPress={this.onPress.bind(this)} 
  title={"Go Back"}
  style={{color: 'red', marginTop: 10, padding: 10}}
/>

我也尝试过这段代码

<Button 
       containerStyle={{padding:10, height:45, overflow:'hidden', 
       borderRadius:4, backgroundColor: 'white'}}
       style={{fontSize: 20, color: 'green'}} 
       onPress={this.onPress.bind(this)} title={"Go Back"}
      > Press me!
</Button>

更新问题：

我也尝试过这种方式..

<Button
    onPress={this.onPress.bind(this)}
    title={"Go Back"}
    style={styles.buttonStyle}
>ku ka</Button>

风格

const styles = StyleSheet.create({
    buttonStyle: {
        color: 'red',
        marginTop: 20,
        padding: 20,
        backgroundColor: 'green'
    }
});

但没有输出：我的手机截图：-

【问题讨论】：

Button你使用自定义组件还是反应按钮组件？
也许反应`按钮
它没有style 属性。请检查一次。

标签： reactjs react-native jsx react-native-button

【解决方案1】：

React Native 按钮的功能非常有限，请看； Button

它没有style prop，并且您没有像<Button>txt</Button>那样将文本设置为“web-way”，而是通过标题属性<Button title="txt" />

如果您想更好地控制外观，您应该使用 TouchableXXXX' 组件之一，例如 TouchableOpacity 它们真的很容易使用:-)

【讨论】：

TouchableOpacity 的工作示例会很棒。
嗨..你能解释一下为什么按钮没有样式道具吗？
From the docs: "如果这个按钮看起来不适合您的应用，您可以使用TouchableOpacity 或TouchableNativeFeedback 构建自己的按钮。要获得灵感，请查看source code for this button component。或者，看看wide variety of button components built by the community。"

【解决方案2】：

我在使用 Button 时遇到了边距和填充问题。我在 View 组件中添加了 Button 并将您的属性应用到 View。

<View style={{margin:10}}>
<Button
  title="Decrypt Data"
  color="orange"
  accessibilityLabel="Tap to Decrypt Data"
  onPress={() => {
    Alert.alert('You tapped the Decrypt button!');
  }}
  />  
</View>

【讨论】：

它适用于某些情况，例如添加“盒子阴影”，然后创建自己的按钮是一种矫枉过正。遗憾的是，如果要设置按钮本身的样式（例如尺寸、填充、文本外观等），则要创建自己的按钮...

【解决方案3】：

React Native 按钮提供的选项非常有限。您可以使用 TouchableHighlight 或 TouchableOpacity，方法是设置这些元素的样式并像这样用它包裹按钮

             <TouchableHighlight 
                style ={{
                    height: 40,
                    width:160,
                    borderRadius:10,
                    backgroundColor : "yellow",
                    marginLeft :50,
                    marginRight:50,
                    marginTop :20
                }}>
            <Button onPress={this._onPressButton}            
            title="SAVE"
            accessibilityLabel="Learn more about this button"
          /> 
          </TouchableHighlight>

您也可以使用 react 库来自定义按钮。一个不错的库是 react-native-button (https://www.npmjs.com/package/react-native-button)

【讨论】：

谢谢，这行得通！沮丧地看到我们需要安装一个库才能使用按钮。

【解决方案4】：

如果您不想创建自己的按钮组件，一个快速而肮脏的解决方案是将按钮包装在视图中，这样您至少可以应用布局样式。

例如，这将创建一行按钮：

<View style={{flexDirection: 'row'}}>
    <View style={{flex:1 , marginRight:10}} >
        <Button title="Save" onPress={() => {}}></Button>
    </View>
    <View style={{flex:1}} >
        <Button title="Cancel" onPress={() => {}}></Button>
    </View>
</View>

【讨论】：

【解决方案5】：

而不是使用按钮。你可以在 react native 中使用 Text，然后在 touchable 中使用

<TouchableOpacity onPress={this._onPressButton}> 
   <Text style = {'your custome style'}>
       button name
   </Text>
</TouchableOpacity >

【讨论】：

【解决方案6】：

按钮中的样式不起作用，您必须为视图赋予样式。

<View style={styles.styleLoginBtn}>
          <Button
            color="orange" //button color
            onPress={this.onPressButton}
            title="Login"
          />
        </View>

将此样式显示出来

const styles = StyleSheet.create({
  styleLoginBtn: {
    marginTop: 30,
    marginLeft: 50,
    marginRight: 50,
    borderWidth: 2,
    borderRadius: 20,
    borderColor: "black", //button background/border color
    overflow: "hidden",
    marginBottom: 10,
  },
});

【讨论】：

【解决方案7】：

仅自学，但包装在 View 中可能允许您在按钮周围添加样式。

const Stack = StackNavigator({
  Home: {
    screen: HomeView,
    navigationOptions: {
      title: 'Home View'
    }
  },
  CoolView: {
    screen: CoolView,
    navigationOptions: ({navigation}) => ({
      title: 'Cool View',
      headerRight: (<View style={{marginRight: 16}}><Button
        title="Cool"
        onPress={() => alert('cool')}
      /></View>
    )
    })
  }
})

【讨论】：

【解决方案8】：

试试这个

<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
    <Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>

【讨论】：

【解决方案9】：

我们现在可以使用buttonStyle prop。
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle

【讨论】：

【解决方案10】：

按钮样式在 react-native 中不起作用，在 react-native 中设置按钮样式的简单方法是将其放在 View 块中，如下所示：

      <View
         style={styles.buttonStyle}>
         <Button
         title={"Sign Up"}
         color={"#F31801"}/>
      </View>

style.buttonStyle 是这样的：

style.buttonStyle{
        marginTop:30,
        marginLeft:50,
        marginRight:50,
        borderWidth:2,
        borderRadius:20,
        borderColor:'#F31801',
        overflow:"hidden",
        marginBottom:10,
}

，它将使您能够使用带有按钮的设计

【讨论】：

为我工作，谢谢。

【解决方案11】：

@plaul 的回答提到了TouchableOpacity，这是一个如何使用它的示例；

  <TouchableOpacity
    style={someStyles}
    onPress={doSomething}
  >
    <Text>Press Here</Text>
  </TouchableOpacity>

建议：

我会推荐使用react-native-paper 组件，因为它们是经过修改的，并且可以比react-native 组件修改得更多。

安装； npm install react-native-paper

然后你可以简单地导入它们并使用。

更多详情在这里Here

【讨论】：

【解决方案12】：

React-native 按钮非常有限，它不允许样式化。使用反应原生元素按钮或创建自定义按钮

【讨论】：

【解决方案13】：

您可以将Pressable 与Text 一起使用，而不是按钮。

import { StyleSheet, Text, View, Pressable } from 'react-native';

<Pressable style={styles.button} onPress = {() => console.log("button pressed")}> 
  <Text style={styles.text}>Press me</Text>
</Pressable>

示例样式：

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: 'red'
  },
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
  },
});

【讨论】：

【解决方案14】：

我知道这是 necro-posting，但我找到了一种非常简单的方法，只需将 margin-top 和 margin-bottom 添加到按钮本身，而无需构建任何其他内容。

当您创建样式时，无论是内联还是通过创建要传递的对象，您都可以这样做：

var buttonStyle = {
   marginTop: "1px",
   marginBottom: "1px"
}

似乎在值周围添加引号使其起作用。我不知道这是不是因为它是 React 的更高版本，而不是两年前发布的版本，但我知道它现在可以工作了。

【讨论】：