web-dev-qa-db-ja.com

反応ネイティブのフローティングアクションボタン

画面の右下にあるreact native Androidでフローティングアクションボタンを使用したいのですが、できません。

CreateButtonコンポーネントには、フローティングボタンコードが含まれています。リストビューの後にCreateButtonコンポーネントを呼び出し、このボタンをListView Androidコンポーネントに透明オーバーレイと右下の固定位置で表示します。

enter image description here

<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>
react-nativefloating-action-button
17
Pankaj Thakur

ボタンを下、左、右、上で調整し、ボタンの絶対位置を指定します。

これは、フローティングボタンを作成するために使用した私のコードです

width: 60,  
height: 60,   
borderRadius: 30,            
backgroundColor: '#ee6e73',                                    
position: 'absolute',                                          
bottom: 10,                                                    
right: 10,
27
Pankaj Thakur
<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>

アイコンパックのインストール： https://github.com/oblador/react-native-vector-icons

npm install react-native-vector-icons --save

反応ネイティブリンク

13
Hitesh Sahu

このコンポーネントをチェックしてください。あなたが探しているものとまったく同じだと思います： https://github.com/mastermoo/react-native-action-button

8
pearl

React Native Action Button を使用すれば、作成する必要はありません。プロジェクトに簡単に統合できます。

1
Daniel Barde

いくつか試してみてください1.borderWidth = 0px 2.最小APIレベルを21に設定します。

0
Ashish Rawat