Плавающая кнопка действия на
Я хочу использовать плавающую кнопку действия, чтобы реагировать на собственный андроид в нижнем правом углу экрана. Но я не могу этого сделать.
Компонент 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>
Ответы
Ответ 1
Настройте кнопку с нижним, левым, правым, верхним и установите абсолютное положение на кнопку.
Это мой код, который использовался для создания плавающей кнопки
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: '#ee6e73',
position: 'absolute',
bottom: 10,
right: 10,
Ответ 2
Проверьте этот компонент, я думаю, он делает именно то, что вы ищете:
https://github.com/mastermoo/react-native-action-button
Ответ 3
Не нужно создавать свои, вы можете просто использовать React Native Action Button, легко интегрировать в свой проект.
Ответ 4
Несколько вещей, которые вы можете попробовать
1.borderWidth = 0px
2. Установите уровень min api равным 21.