13:41 提问
react native textinput如何控制不弹出软键盘？
react native textinput如何控制不弹出软键盘？
按赞数排序
其他相关推荐
其他相似问题当前位置：
& React Native - 弹出确认框、弹出选择框（Alert）的使用详解
React Native - 弹出确认框、弹出选择框（Alert）的使用详解
发布：hangge
弹出确认框与弹出询问框是移动应用程序开发中经常需要使用的 UI 手段。React Native 已经为我们提供了原生的对话框组件：AlertIOS 和 Alert。
关于 AlertIOS，我之前已经写过相关的文章：。虽然 AlertIOS 功能强大但只支持 iOS 系统。
而本文介绍的 Alert API 虽然只有一个普通的消息提示对话框类型，但它是 iOS 设备和 Android 设备都通用的。
1，弹出确认框
如果弹出框只给用户一个选择，或者不给选择。那它就是弹出确认框。
（1）下面是一个简单的样例
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
} from 'react-native';
class Main extends Component {
render() {
&View style={styles.flex}&
&Text style={styles.back_text} onPress={this.showAlert.bind(this)}&
showAlert() {
Alert.alert('标题内容','正文内容');
const styles = StyleSheet.create({
back_text:{
width: 80,
backgroundColor: 'gray',
color: 'white',
textAlign: 'center',
fontSize: 18,
alignSelf: 'center',
marginTop: 20
AppRegistry.registerComponent('HelloWorld', () =& Main);
当我们点击“弹出”按钮会弹出一个确认框：
（2）默认情况下确认框的按钮自动叫“OK”，我们也可以提供按钮名称。比如我们将确认按钮修改成“我知道了”
Alert.alert('标题内容','正文内容',[{text:"我知道了"}]);
（3）除了提供按钮名称，还可以指定回调函数。下面代码，当用户点击了“我知道了”按钮后，confirm&函数会被执行。
Alert.alert('标题内容','正文内容',
[{text:"我知道了", onPress:this.confirm}]
2，弹出选择框
如果弹出框给了多个选择。那它就是弹出选择框。选项个数上限在 Android 和 iOS 下稍有不同：
Android 平台：弹出选择框最多只能有三个选项
iOS 平台：弹出选择框没有选项个数的显示。
（1）下面是一个简单的样例
Alert.alert('标题内容','正文内容',
{text:"选项一", onPress:this.opntion1Selected},
{text:"选项二", onPress:this.opntion2Selected},
{text:"选项三", onPress:this.opntion3Selected},
{text:"选项四", onPress:this.opntion4Selected},
（2）可以看到在 Android 设备下，第四个选项显示不出来。而 iOS 设备是没有这个问题的。
3，手机返回键按下的效果
当弹出框显示时，按下手机的返回键会让弹出框消失，并且不会触发任何给 Alert API 提供的回调函数。React-Native&&alertView弹框代码
最近在学习React-Native基本知识，以下代码是根据官网上的代码示例运行成功的
import React, {
& AppRegistry,
& Component,
& StyleSheet,
& TouchableHighlight,
& Navigator,
} from 'react-native';
var alertMessage = 'Credibly reintermediate next-generation
potentialities after goal-oriented ' +
&'catalysts for change. Dynamically
revolutionize.';
var seProject = React.createClass({
& render: function() {
& & return (
& & onPress={() =&
Alert.alert(
& & & 'Alert
alertMessage,
& & & Alert with
message and default button
& & onPress={() =&
Alert.alert(
& & & 'Alert
alertMessage,
& {text: 'OK', onPress: () =& console.log('OK
Pressed!')},
& & & Alert with
one button
& & onPress={() =&
Alert.alert(
& & & 'Alert
alertMessage,
& {text: 'Cancel', onPress: () =&
console.log('Cancel Pressed!')},
& {text: 'OK', onPress: () =& console.log('OK
Pressed!')},
& & & Alert with
two buttons
& & onPress={() =&
Alert.alert(
& & & 'Alert
& {text: 'Foo', onPress: () =& console.log('Foo
Pressed!')},
& {text: 'Bar', onPress: () =& console.log('Bar
Pressed!')},
& {text: 'Baz', onPress: () =& console.log('Baz
Pressed!')},
& & & Alert with
three buttons
& & onPress={() =&
Alert.alert(
& & & 'Foo
alertMessage,
'..............'.split('').map((dot, index) =& ({
& text: 'Button ' + index,
& onPress: () =& console.log('Pressed ' +
& & & Alert with
too many buttons
const styles = StyleSheet.create({
& container: {
& & flex: 1,
& & justifyContent:
& & alignItems:
& & backgroundColor:
'#F5FCFF',
& welcome: {
& & fontSize: 20,
& & textAlign:
& & margin: 10,
& & color:'orange'
& welcomeContainer: {
& & height:70,
& & width:300,
& & backgroundColor:
& instructions: {
& & textAlign:
& & color: 'orange',
& & marginBottom: 5,
& wrapper: {
& & borderRadius: 5,
& & marginBottom: 5,
& button: {
& & backgroundColor:
'#eeeeee',
& & padding: 10,
AppRegistry.registerComponent('seProject', () =&
seProject);
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}