我使用react-native-elements,它们可以很容易地使一个实际的按钮显示为"凸起"或阴影.我想复制TouchableOpacity的外观.

下面是react-native-elements的"凸起按钮"示例.

这是微妙的,但明显产生了良好的影响.

是的,我看过文件了.如果我遗漏了什么,请指出...但我不认为有什么可以做到这一点.谢谢

推荐答案

您可以将以下样式添加到TouchableOpacity以使其升高.

<TouchableOpacity style={styles.button} />

  button: {
    shadowColor: 'rgba(0,0,0, .4)', // IOS
    shadowOffset: { height: 1, width: 1 }, // IOS
    shadowOpacity: 1, // IOS
    shadowRadius: 1, //IOS
    backgroundColor: '#fff',
    elevation: 2, // Android
    height: 50,
    width: 100,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
},

You can read more about them here.

IOS Specific Props

Android Specific Props

React-native相关问答推荐

如何将S的此API输出输出到平面列表中?控制台将数据及其可视记录到平面列表中,但我无法输出到平面列表中

Touchabble 不透明度不工作-react 本机

react native调用fetch后如何使用Async Storage在本地保存数据?

如何在react native 中从 axios 重定向并将数据传递给路由

PanResponder 在第二次拖动时将 Animated.View 捕捉回原始位置

Google SignIn SDK 因抛出错误而失败,发生不可恢复的登录失败 -catch 错误

如何实时从 react-native-camera 获取帧

React-native 在浏览器中打开链接并返回应用程序

React-Native iOS - 如何通过按下按钮从 React-Native 视图导航到非 React-Native 视图(本机 iOS 视图控制器)?

React Navigation TabNavigator:在选项卡更改时重置上一个选项卡

如何在 ubuntu 上安装 facebook watchman?

React native + redux-persist:如何忽略键(黑名单)?

如何在 Expo 和 React Native 中使用绝对路径导入?

查找文本输入框和按钮字段的资源名称以响应本机 android 应用程序

expo 已过期卸载并再次运行以升级

在 React 中调用 getDerivedStateFromProps 中的方法

如何在 React Native 中将图像放置在其他图像之上?

降级 react-native 的适当机制

zIndex 不适用于react-native元素

react-navigation 标题有一条微弱的线