我想在屏幕右下角的react原生android中使用一个浮动操作按钮。但是我不能这样做。
CreateButton组件包含浮动按钮代码。我在列表视图后调用了CreateButton组件,并希望在ListView android组件上使用透明覆盖层和右下角的固定位置显示此按钮。
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.navBar}>
<TouchableOpacity style={styles.menuIconButton}>
<Image style={styles.menuIcon} source={{uri : 'https://cdn1.iconfinder.com/data/icons/basic-ui-elements-plain/422/ 06_menu_stack-128.png'}}/>
</TouchableOpacity>
<Text style={styles.appName}>LifeMaker</Text>
<TouchableOpacity style={styles.smokeIconButton}>
<Image style={styles.smokeIcon} source={{uri : 'http://avtech.com/images/home/icons/Icon_Smoke_&_Fire.png'}}/>
</TouchableOpacity>
</View>
<ToolbarAndroid
title="AwesomeApp"
onActionSelected={this.onActionSelected}/>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderSmokeSignals}/>
<CreateButton/> //this is floating button component call
</DrawerLayoutAndroid>
//this is floating button component (<CreateButton>)
<View style={styles.createButton}>
<AccentColoredFab>
<Icon
name='ion|plus'
size={25}
color='#000000'
style={styles.icon}
/>
</AccentColoredFab>
</View>
8条答案
按热度按时间iezvtpos1#
调整您的按钮与底部,左,右,顶部,并提供绝对位置的按钮。
这是我用来制作浮动按钮代码
e4yzc0pl2#
安装图标包:https://github.com/oblador/react-native-vector-icons
npm安装React Native矢量图标--保存
React-本机链接
tjrkku2a3#
看看这个组件,我认为它完全符合您的需求:https://github.com/mastermoo/react-native-action-button
rn0zuynd4#
无需创建您自己的,只需使用React Native Action Button,即可轻松集成到您的项目中。
mbjcgjjk5#
您可以尝试几件事1.borderWidth=0px 2.将最小API级别设置为21。
h79rfbju6#
我有同样的问题,我已经尝试了Pankaj Thakur解决方案,但它没有为我解决它(FAB仍然相对于scrollList).所以我使用顶部属性为我解决了它.
hc2pp10m7#
以下是更多至今仍在维持的回购协议(2019年12月):
https://github.com/santomegonzalo/react-native-floating-action
https://github.com/WrathChaos/react-native-floating-action-button
tgabmvqs8#
我用的是这个package,效果很好。尽管这个问题有答案,但我认为这个答案会对别人有帮助。