Javascript 如何在React Native中添加按钮？

我对整个“无CSS”的事情感到困惑，但我理解为什么它是有益的。我想做的就是在屏幕中间放一个按钮，但是我不知道造型在什么时候起作用。这是我的代码：

var tapSpeed = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Tap me as fast as you can!
        </Text>
        <View style={styles.button}>
        !
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFCCCC'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  button: {
    textAlign: 'center',
    color: '#ffffff',
    marginBottom: 7,
    border: 1px solid blue,
    borderRadius: 2px
  }
});

var tapSpeed=React.createClass({
render:function（）{
返回(
尽可能快地拍我！
!
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#FFCCCC”
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10
},
按钮：{
textAlign:'中心'，
颜色：“#ffffff”，
marginBottom:7，
边框：1px纯蓝，
边界半径：2px
}
});

更新：使用内置的

已弃用：

将您的视图包装到iOS和Android中

var {
  Platform,
  TouchableHighlight,
  TouchableNativeFeedback 
} = React;

var tapSpeed = React.createClass({
  buttonClicked: function() {
    console.log('button clicked');
  },
  render: function() {
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android') {
     TouchableElement = TouchableNativeFeedback;
    }
    return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Tap me as fast as you can!
      </Text>
      <TouchableElement
        style={styles.button}
        onPress={this.buttonClicked.bind(this)}>
        <View>
          <Text style={styles.buttonText}>Button!</Text>
        </View>
      </TouchableElement>        
    </View>
    );
  }
});       

var{
平台，
触控高光，
可触摸的自然反馈
}=反应；
var tapSpeed=React.createClass({
按钮点击：函数（）{
log（“单击按钮”）；
},
render:function（）{
var TouchableElement=TouchableHighlight；
如果（Platform.OS==='android'）{
TouchableElement=TouchableNativeFeedback；
}
返回(
尽可能快地拍我！
按钮
);
}
});       

该软件包提供了一个类似于本机按钮的按钮。使用npm Install react native按钮安装它，并在组件中使用它，如下所示：

var Button = require('react-native-button');

var ExampleComponent = React.createClass({
  render() {
    return (
      <Button
        style={{borderWidth: 1, borderColor: 'blue'}}
        onPress={this._handlePress}>
        Press Me!
      </Button>
    );
  },

  _handlePress(event) {
    console.log('Pressed!');
  },
});

var-Button=require（'react-native-Button'）；
var ExampleComponent=React.createClass({
render（）{
返回(
按我！
);
},
_扶手（活动）{
console.log（'Pressed！'）；
},
});

您可以使用内置的react原生按钮元素

import React，{Component}来自'React'；
从“react native”导入{样式表、视图、按钮、警报、AppRegistry}；
类MainApp扩展组件{
_onPress（）{
警惕。警惕（'on Press！'）；
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#FFFFFF”
},
按钮容器：{
背景颜色：“#2E9298”，
边界半径：10，
填充：10，
阴影颜色：'#000000'，
阴影偏移：{
宽度：0，
身高：3
},
阴影半径：10，
阴影不透明度：0.25
}
})
AppRegistry.registerComponent（'MainApp'，（）=>MainApp）；

阅读更多信息。

请检查有关按钮的信息

在应用程序中添加按钮并设置其样式的方法不止一种

你们可以使用按钮标签，它只有一种按颜色属性设置样式的方式，它会出现在不同于Android的IOS中，或者把按钮放在带有样式的视图标签中

并检查TouchableOpacity和TouchableNativeFeedback标签

并在下面的链接上锁定更多选项，以便在应用程序中添加自定义按钮

---

您有两个选项来实现可触摸组件/按钮来处理用户事件

• 一种是使用内置的

  按钮

  组件。检查这里的文件
• 两种方法使用

  TouchableHighlight

  或

  TouchableNativeFeedback

  或

  TouchableOpacity

  或

  TouchableWithoutFeedback

  。可以将此视为将应用程序的不同区域转换为可点击（clickable）的一种方式，或者是创建自定义按钮的一种方式。 这里的每个组件根据用户点击后的行为而有所不同。查看文档以了解更多详细信息。等等

关于react native中的样式，您需要了解flexbox布局。选中此css flexbox文章所有规则都适用于react native，但您必须将规则大写，例如

align content

到

alignContent

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

导出默认类登录扩展React.Component{
条形码操作=（）=>{
this.props.navigation.navigate（'BarCodeScanner'）
}
ClevertPacation=（）=>{
this.props.navigation.navigate（'CleverTapApp'））
}
} 
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
},
按钮容器：{
差额：20
},
可选布局按钮容器：{
差额：20，
flexDirection:'行'，
justifyContent:“间距”
}
});

---

来自

react native

软件包的

按钮
元素不提供内置样式功能。例如，“标题”道具默认为大写。因此，我使用了另一个包
react native elements
，它为按钮元素提供了很好的特性，并提供了不同的样式选项

您可以从“React”中参考有关导入React、{Component}的更多详细信息；
从“react native”导入{样式表、视图、TouchableOpacity、文本}；
var tapSpeed=React.createClass({
render:function（）{
返回(
尽可能快地拍我！
!
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
flexDirection:'列'，
对齐项目：“居中”，
背景颜色：“#FFCCCC”
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
自我定位：“中心”
},
按钮：{
为内容辩护：“中心”，
对齐项目：“居中”，
marginBottom:7，
边框：1px纯蓝，
边界半径：2px
}
});
在编辑之前，有一些错误的分号和额外的逗号——我想它们是j
<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

export default class Login extends React.Component {
  barcodeAction = () => {
    this.props.navigation.navigate('BarCodeScanner')
  }

  cleverTapAction = () => {
    this.props.navigation.navigate('CleverTapApp')
  }
} 

render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});

import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity, Text} from 'react-native';
var tapSpeed = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <TouchableOpacity>
          <Text style={styles.welcome}>
            Tap me as fast as you can!
          </Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text>!</Text>
        </TouchableOpacity>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: '#FFCCCC'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    alignSelf: 'center'
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 7,
    border: 1px solid blue,
    borderRadius: 2px
  }
});