如何在 React Native 中添加按鈕？

Question

我對整個“無 CSS”的事情感到困惑，但我明白為什么它是有益的。 我想要做的就是在屏幕中間放置一個按鈕，但我還不明白 React 中的樣式是如何工作的。 這是我的代碼：

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
  }
});

Answer 1

更新：使用內置按鈕組件。

棄用：

包裝你查看到TouchableHighlight iOS和TouchableNativeFeedback為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>
    );
  }
});       

Answer 2

您可以使用內置的 react-native Button 元素。

import React, { Component } from 'react';
import { StyleSheet, View, Button, Alert, AppRegistry } from 'react-native';

class MainApp extends Component {

_onPress() {
  Alert.alert('on Press!');
 }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button onPress={this._onPress} title="Hello" color="#FFFFFF" accessibilityLabel="Tap on Me"/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  buttonContainer: {
    backgroundColor: '#2E9298',
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 10,
    shadowOpacity: 0.25
  }
})

AppRegistry.registerComponent('MainApp', () => MainApp);

在這里閱讀更多。

Answer 3

react-native-button包提供了一個樣式類似於原生按鈕的按鈕。 使用npm install react-native-button安裝它，並在您的組件中使用它，如下所示：

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!');
  },
});

Answer 4

您有兩種選擇來實現可觸摸的組件/按鈕來處理用戶事件。

• 一種是使用內置的Button組件。 檢查這里的文檔http://facebook.github.io/react-native/docs/button.html
• 兩個使用TouchableHighlight或TouchableNativeFeedback或TouchableOpacity或TouchableWithoutFeedback 。 將此視為將應用程序的不同區域轉換為可點擊（可點擊）或創建自定義按鈕的一種方式。 根據用戶點擊后的行為方式，此處的每個組件都不同。 查看文檔以獲取更多詳細信息。 http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html等。

關於 React Native 中的樣式，您需要了解 flexbox 布局。 檢查此 css flexbox 文章所有規則都適用於 react-native https://css-tricks.com/snippets/css/a-guide-to-flexbox/除了您必須將規則大寫，例如align-content到alignContent

Answer 5

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

Answer 6

請檢查有關按鈕的本機文檔

您有不止一種方法可以在應用程序中添加按鈕並為其設置樣式

您可以使用 Button 標簽，它只有一種通過顏色屬性設置樣式的方式，它會出現在與 Android 不同的 IOS 中，或者將按鈕放在帶有樣式的視圖標簽中

<View style={style.buttonViewStyle}> <Button title="Facebook" color="blue" onPress={this.onFacebookPress} /> </View>

並檢查 TouchableOpacity 和 TouchableNativeFeedback 標簽

並鎖定以下鏈接以獲取更多選項以在您的應用程序中添加自定義按鈕

https://js.coach/react-native/react-native-action-button?search=button

Answer 7

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'
  }
});

Answer 8

react-native包中的Button元素不提供內置樣式功能。 前任。 默認情況下，“標題”道具將大寫。 因此，我使用了另一個包react-native-elements ，它為 Button 元素提供了很好的功能以及不同的樣式選項。

您可以從react-native-elements參考有關Button 的更多詳細信息

Answer 9

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
  }
});