最近在学习React-Native基本知识，以下代码是根据官网上的代码示例运行成功的
import React, {
AppRegistry,
Alert,
Component,
StyleSheet,
TouchableHighlight,
Navigator,
Text,
View
} 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
Title',
alertMessage,
)}>
Alert with
message and default button
onPress={() =>
Alert.alert(
'Alert
Title',
alertMessage,
[
{text: 'OK', onPress: () => console.log('OK
Pressed!')},
]
)}>
Alert with
one button
onPress={() =>
Alert.alert(
'Alert
Title',
alertMessage,
[
{text: 'Cancel', onPress: () =>
console.log('Cancel Pressed!')},
{text: 'OK', onPress: () => console.log('OK
Pressed!')},
]
)}>
Alert with
two buttons
onPress={() =>
Alert.alert(
'Alert
Title',
null,
[
{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
Title',
alertMessage,
'..............'.split('').map((dot, index) => ({
text: 'Button ' + index,
onPress: () => console.log('Pressed ' +
index)
}))
)}>
Alert with
too many buttons
);
},
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:
'center',
alignItems:
'center',
backgroundColor:
'#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign:
'center',
margin: 10,
color:'orange'
},
welcomeContainer: {
height:70,
width:300,
backgroundColor:
'green',
},
instructions: {
textAlign:
'center',
color: 'orange',
marginBottom: 5,
},
wrapper: {
borderRadius: 5,
marginBottom: 5,
},
button: {
backgroundColor:
'#eeeeee',
padding: 10,
},
});
AppRegistry.registerComponent('seProject', () =>
seProject);
本文通过实例详细介绍了React Native中Alert组件的使用方法，包括如何显示不同类型的警告框及其按钮配置。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
