推荐:React Native Action Sheet —— 灵活高效的底部操作表组件
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Platform } from 'react-native';
const ActionSheet = ({ options, cancelButtonIndex, destructiveButtonIndex, onPress }) => {
const buttonStyle = (buttonIndex) => {
if (buttonIndex === destructiveButtonIndex) {
return styles.destructiveButton;
} else if (buttonIndex === cancelButtonIndex) {
return styles.cancelButton;
}
return null;
};
return (
<View style={styles.container}>
{options.map((buttonTitle, index) => (
<TouchableOpacity
key={index}
onPress={() => onPress(index)}
style={[styles.button, buttonStyle(index)]}
>
<Text style={Platform.OS === 'ios' ? styles.text : null}>{buttonTitle}</Text>
</TouchableOpacity>
))}
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
justifyContent: 'center',
paddingVertical: 10,
backgroundColor: 'white',
},
button: {
padding: 10,
alignItems: 'stretch',
},
destructiveButton: {
color: 'red',
},
cancelButton: {
color: 'grey',
},
text: {
fontSize: 18,
},
});
export default ActionSheet;
这个代码实例提供了一个简洁的React Native Action Sheet组件,它可以在iOS和Android上以高效的方式展示底部操作表。组件通过props接收配置,并使用map函数动态渲染每个按钮。按钮样式可以根据是否为cancelButtonIndex或destructiveButtonIndex进行自定义。
评论已关闭