images/sample/slideshow/logo-loading.png

تالار گفتمان

سوالات خود را جست و جو کنید و اگر جوابی نیافتید، با ایجاد یک بحث جدید، از دیگران راهنمایی بگیرید

  • react-native-material-bottom-navigation

:) این کامپوننت می تواند به راحتی نصب و مورد استفاده قرار گیرد. در بخش زیر می توانید مد ظاهری آن را مشاهده نمایید
https://miro.medium.com/max/400/1*XmQhrFjj1p5S9yd8YJOadQ.gif

نصب :

با استفاده از npm:


npm install react-native-material-bottom-navigation


یا با استفاده از yarn:


yarn add react-native-material-bottom-navigation



import BottomNavigation, {
FullTab
} from 'react-native-material-bottom-navigation'

export default class App extends React.Component {
tabs = [
{
key: 'games',
icon: 'gamepad-variant',
label: 'Games',
barColor: '#388E3C',
pressColor: 'rgba(255, 255, 255, 0.16)'
},
{
key: 'movies-tv',
icon: 'movie',
label: 'Movies & TV',
barColor: '#B71C1C',
pressColor: 'rgba(255, 255, 255, 0.16)'
},
{
key: 'music',
icon: 'music-note',
label: 'Music',
barColor: '#E64A19',
pressColor: 'rgba(255, 255, 255, 0.16)'
}
]

renderIcon = icon => ({ isActive }) => (
<Icon size={24} color="white" name={icon} />
)

renderTab = ({ tab, isActive }) => (
<FullTab
isActive={isActive}
key={tab.key}
label={tab.label}
renderIcon={this.renderIcon(tab.icon)}
/>
)

render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{/* Your screen contents depending on current tab. */}
</View>
<BottomNavigation
onTabPress={newTab => this.setState({ activeTab: newTab.key })}
renderTab={this.renderTab}
tabs={this.tabs}
/>
</View>
)
}
}
  میزان رضایتمندی شما از مطلب ؟
(1 رای)
  1. مدیر سامانه
  2. react native
  3. سه شنبه, 29 مرداد 1398
  4.  اشتراک
هنوز نظری قرار داده نشده است


پاسخی ارسال نشده است
همچنین این پست قفل است و امکان ارسال نیز وجود ندارد
ham
javidan
faranovin2
nabisa
nbt.p
pol
tat
ayande
 
 
Top
آیا به تازگی با مجموعه اِپرا آشنا شده اید؟ آیا تمایل دارید اطلاعات بیشتری از ما داشته باشید؟ More details…