Javascript 如何在 React Native 中添加按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29872918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a button in React Native?
提问by baristaGeek
I′m confused with this whole "no CSS" thing, but I understand why it's beneficial. All I want to do is place a button in the middle of the screen but I don't understand how styling works in React yet. This is my code:
我对整个“无 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
}
});
回答by Yevgen Safronov
Update:use built-in Button component.
更新：使用内置按钮组件。
Deprecated:
弃用：
Wrap your View into TouchableHighlightfor iOS and TouchableNativeFeedbackfor Android.
包装你查看到TouchableHighlightiOS和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>
);
}
});
回答by Ashok R
You can use built in react-native Button element.
您可以使用内置的 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);
Read More Here.
在这里阅读更多。
回答by ide
The react-native-buttonpackage provides a button that is styled like a native button. Install it with npm install react-native-buttonand use it in your component like this:
该反应天然按钮包提供的样式等天然按钮的按钮。安装它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!');
},
});
回答by kabangi julius
You have two options to achieve a touchable component/button to handle user's events.
您有两种选择来实现可触摸的组件/按钮来处理用户事件。
- One is to use the built in
ButtonComponent. Check the docs here http://facebook.github.io/react-native/docs/button.html - Two use either
TouchableHighlightorTouchableNativeFeedbackorTouchableOpacityorTouchableWithoutFeedback. Think of this as a way for you to convert different areas of your app to tappable(clickable) or a way for you to create a custom button. Each component here is different based on how it behaves once it's tapped by the user. Check the docs for more details. http://facebook.github.io/react-native/docs/touchablewithoutfeedback.htmletc.
- 一种是使用内置
Button组件。检查这里的文档http://facebook.github.io/react-native/docs/button.html - 两个使用
TouchableHighlightorTouchableNativeFeedback或TouchableOpacityorTouchableWithoutFeedback。将此视为将应用程序的不同区域转换为可点击（可点击）或创建自定义按钮的一种方式。根据用户点击后的行为方式，此处的每个组件都不同。查看文档以获取更多详细信息。http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html等。
Concerning styling in react native you will need to understand flexbox layout. Check this css flexbox article all rules are applicable to react-native https://css-tricks.com/snippets/css/a-guide-to-flexbox/except that you will have to capitalize the rules e.g align-contentto alignContent
关于 React Native 中的样式，您需要了解 flexbox 布局。检查这个CSS Flexbox的文章的所有规则都适用于反应本地https://css-tricks.com/snippets/css/a-guide-to-flexbox/除非你将不得不利用规则如align-content以alignContent
回答by Aymen
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
回答by Keshav Gera
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'
}
});
回答by Thiru
The Buttonelement from react-nativepackage does not provide built in styling feature. Ex. The "title" props will be in upper case by default. Hence, I've used an another package react-native-elementsthat provides nice features for Button element along with different styling options.
包中的Button元素react-native不提供内置样式功能。前任。默认情况下，“标题”道具将大写。因此，我使用了另一个包react-native-elements，它为 Button 元素提供了很好的功能以及不同的样式选项。
You can refer more details on Button from react-native-elements
您可以从 Button参考更多详细信息react-native-elements
回答by Viktor Belashov
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
}
});
回答by Montaser Almohasen
Please check react-native doc'sregarding the buttons
请检查有关按钮的本机文档
You have more than one way to add button in your application and styling it
您有不止一种方法可以在应用程序中添加按钮并为其设置样式
You can use Button tag and it's have only one way styling by color attribute, it will appearing in IOS different than Android, or by putting button in view tag with style
您可以使用 Button 标签，它只有一种通过颜色属性设置样式的方式，它会出现在与 Android 不同的 IOS 中，或者将按钮放在带有样式的视图标签中
<View style={style.buttonViewStyle}>
<Button title="Facebook" color="blue" onPress={this.onFacebookPress} />
</View>
<View style={style.buttonViewStyle}>
<Button title="Facebook" color="blue" onPress={this.onFacebookPress} />
</View>
And check the TouchableOpacity and TouchableNativeFeedback tags
并检查 TouchableOpacity 和 TouchableNativeFeedback 标签
And take a lock on below link for more options to add custom buttons in your app
并锁定以下链接以获取更多选项以在您的应用程序中添加自定义按钮
https://js.coach/react-native/react-native-action-button?search=button
https://js.coach/react-native/react-native-action-button?search=button
