nút tác vụ nổi trên phản ứng gốc

Question

Tôi muốn sử dụng nút tác vụ nổi trong android gốc phản ứng ở góc dưới cùng bên phải của màn hình. Nhưng tôi không thể làm như vậy.

Thành phần CreateButton chứa mã nút nổi. Tôi đã gọi thành phần CreateButton sau danh sách Xem và tôi muốn hiển thị nút này trên thành phần Android ListView với lớp phủ trong suốt và vị trí cố định ở dưới cùng bên phải.

<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> 

Answer 1

Điều chỉnh nút của bạn với đáy, Left, Right, Top và cung cấp vị trí tuyệt đối cho nút.

Đây là mã của tôi đã từng nút nổi làm

width: 60, 
height: 60, 
borderRadius: 30,    
backgroundColor: '#ee6e73',          
position: 'absolute',           
bottom: 10,              
right: 10, 

Answer 2

Vài điều bạn có thể thử 1.borderWidth = 0px 2. Set phút mức api để 21.

Answer 3

Kiểm tra thành phần này, tôi nghĩ nó thực hiện chính xác những gì bạn đang tìm kiếm: https://github.com/mastermoo/react-native-action-button

Answer 4

Không cần phải tạo ra của bạn bạn chỉ có thể sử dụng React Native Action Button thật dễ dàng để tích hợp vào dự án của bạn.

Answer 5

<TouchableOpacity 
    style={{ 
     borderWidth:1, 
     borderColor:'rgba(0,0,0,0.2)', 
     alignItems:'center', 
     justifyContent:'center', 
     width:70, 
     position: 'absolute',           
     bottom: 10,              
     right: 10, 
     height:70, 
     backgroundColor:'#fff', 
     borderRadius:100, 
    }} 
> 
    <Icon name="plus" size={30} color="#01a699" /> 
    </TouchableOpacity> 

Cài đặt Gói Biểu tượng: https://github.com/oblador/react-native-vector-icons

NPM cài đặt phản ứng bản địa-vector biểu tượng --save

liên kết phản ứng bản địa