探索React Native Floating Action：一款创新的移动UI组件库

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { FloatingAction } from 'react-native-floating-action'; // 引入FloatingAction组件
import { Ionicons } from '@expo/vector-icons'; // 引入图标字体
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        {/* 主要内容区 */}
        <Text>这里是你的主要内容</Text>
        {/* 浮动动作按钮组件 */}
        <FloatingAction
          actions={[
            {
              text: '编辑', 
              icon: <Ionicons name="md-create" style={styles.actionIcon} />, 
              name: 'edit', 
              position: 1,
            },
            {
              text: '分享', 
              icon: <Ionicons name="md-share" style={styles.actionIcon} />, 
              name: 'share', 
              position: 2,
            },
            // 可以添加更多的动作按钮
          ]}
          onPressAction={(action) => console.log(action.name)} // 点击动作时的回调
          overrideWithActionKey="edit" // 可选，默认为null，设置为特定的action.name时，重写浮动动作按钮的行为
          overrideWithActionKeyVisible={true} // 可选，默认为false，是否在设置overrideWithActionKey时显示该动作
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  actionIcon: {
    color: 'white',
    fontSize: 20,
    height: 22,
    width: 22,
  },
});

这个代码示例展示了如何在React Native应用中使用react-native-floating-action库来创建一个浮动动作按钮组件。我们引入了FloatingAction组件和Ionicons图标字体，并定义了一个包含两个动作的浮动动作按钮组件，每个动作都有文本和图标。当用户点击动作按钮时，会通过onPressAction回调函数输出被点击动作的名称。