一种解决方法是在应用程序的App.js中导入Platform模块,并根据平台更改ActionSheet的颜色。
例如,对于iOS平台,我们可以使用以下代码:
import React, { useState } from 'react'; import { Platform, Button, ActionSheetIOS, StyleSheet } from 'react-native';
const App = () => { const [visible, setVisible] = useState(false);
const showActionSheet = () => { Platform.OS === 'ios' ? ActionSheetIOS.showActionSheetWithOptions( { options: ['Option 1', 'Option 2', 'Cancel'], cancelButtonIndex: 2, destructiveButtonIndex: 1, tintColor: 'blue' // 设置颜色 }, buttonIndex => { console.log('Button Index:', buttonIndex); } ) : setVisible(true); };
return (
<>
{visible && (
const styles = StyleSheet.create({ container: { backgroundColor: '#fff', position: 'absolute', bottom: 0, width: '100%', padding: 20, alignItems: 'center', borderTopWidth: 1, borderTopColor: '#eee' } });
export default App;
这将在iOS上呈现具有蓝色tintColor的ActionSheet,并在Android上使用自定义模拟操作表。 在Android上,我们可以使用react-native-action-sheet库来呈现漂亮的模拟操作表,如下所示:
import React, { useState } from 'react'; import { Button } from 'react-native'; import ActionSheet from 'react-native-action-sheet';
const App = () => { const [visible, setVisible] = useState(false);
const options = ['Option 1', 'Option 2', 'Cancel'];
const showActionSheet = () => { ActionSheet.show( { options, cancelButton
上一篇:Actionscript:访问可能未定义的属性id。
下一篇:ActionSheetIOS API中的Copy to Slack、Copy to Contacts和Skype选项的活动类型有哪些?