ReactNative之TabBariOS和TabNavigator

ReactNaive相關文章

1. React Native 中文網

2. GitHub相關代碼地址

3. ReactNaive之CSS和Flex布局

4. ReactNative之基本組件

5. React Naive之ScrollView和ListView

6. React Native之導航組件NavigatorIOS和Navigator

7. ReactNative之TabBariOS和TabNavigator

注: 本文主要總結的是ReactNative的一些簡單語法, 大部分內容總結自袁大神的文章

效果圖

底部選項條.png

一. TabBarIOS

• 底部選項條, 不能跨平臺,只能iOS端使用
• 添加如下代碼, 就會出現底部選項條

    return (
        <TabBarIOS></TabBarIOS>
    )        

1. 相關屬性

barTintColor='yellow'
//標簽欄的背景顏色

tintColor='#ed7f30'
//當前被選中的標簽圖標的顏色

unselectedItemTintColor='#a19a9a'
//當前沒有被選中的標簽圖標的顏色。僅在iOS 10及以上版本有效

translucent={false} 
//一個布爾值，決定標簽欄是否需要半透明化
//默認為true, 有透明效果

二. 選項卡: TabBarIOS.Item

• TabBarIOS: 只是表示底部的一個選項條
• TabBarIOS.Item: 才代表每一個選項卡
• TabBarIOS.Item必須包裝一個View,作為點擊tabBar按鈕，切換的View

                <TabBarIOS.Item title='首頁'
                                icon={{uri:'btn_home_normal'}}
                                selectedIcon={{uri:'btn_home_selected'}}
                                onPress={()=>{
                                    this.setState({
                                        selectedIndex:0
                                    })
                                }}
                                selected={this.state.selectedIndex == 0}
                >
                    <View style={{backgroundColor:'red', flex:1}}/>
                </TabBarIOS.Item>

1. 常用屬性

badge string, number 
badge='我'
badge={12}
//在圖標右上角顯示一個紅色的氣泡, 可接受string和number類型

title string 
//在圖標下面顯示的標題文字。如果定義了systemIcon屬性，這個屬性會被忽略。

icon Image.propTypes.source 
//給當前標簽指定一個自定義的圖標。如果定義了systemIcon屬性， 這個屬性會被忽略。

selectedIcon Image.propTypes.source 
//當標簽被選中的時候顯示的自定義圖標。如果定義了systemIcon屬性，這個屬性會被忽略。如果定義了icon而沒定義這個屬性，在選中的時候圖標會染上藍色。

onPress function 
//當此標簽被選中時調用。你應該修改組件的狀態來使得selected屬性為true

selected bool 
//這個屬性決定了子視圖是否可見。如果你看到一個空白的頁面，很可能是沒有選中任何一個標簽

systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') 
//一些預定義的系統圖標。注意如果你使用了此屬性，標題和自定義圖標都會被覆蓋為系統定義的值。

• 只要設置對應的tabBarItem的selected為true,就會自動跳轉到對應界面
  • 注意：tabBarItem的selected屬性不能寫死，可以搞個角標記錄當前選中那個角標
• 監聽tabBarItem的點擊，修改selected屬性
• 相關示例代碼

export default class App extends Component<{}> {
    constructor(props){
        super(props)
        this.state = {
            selectedIndex:0
        }
    }

    // 當一個組件要顯示的時候,就會自動調用render,渲染組件
    render() {
        return (
            <TabBarIOS tintColor='#ed7f30'>
                <TabBarIOS.Item title='首頁'
                         icon={{uri:'btn_home_normal'}}
                                selectedIcon={{uri:'btn_home_selected'}}
                                badge='我'
                                onPress={()=>{
                                    this.setState({
                                        selectedIndex:0
                                    })
                                }}
                                selected={this.state.selectedIndex == 0}
                >
                    <View style={{backgroundColor:'red', flex:1}}/>
                </TabBarIOS.Item>

                <TabBarIOS.Item title='直播'
                                icon={{uri:'btn_column_normal'}}
                                selectedIcon={{uri:'btn_column_selected'}}
                                badge={12}
                                onPress={()=>{
                                    this.setState({
                                        selectedIndex:1
                                    })
                                }}
                                selected={this.state.selectedIndex == 1}
                >
                    <View style={{backgroundColor:'yellow', flex:1}}/>
                </TabBarIOS.Item>
            </TabBarIOS>
        )
    }
}

三. TabNavigator

• TabBarIOS只能用于iOS平臺，如果在安卓上也需要有TabBar,就不能使用TabBarIOS。
• TabNavigator:一個跨平臺的TabBar第三方框架組件，可以用于iOS和安卓平臺
• TabNavigator地址

1. 安裝和導入

1-1. 安裝第三方框架

yarn add react-native-tab-navigator

1-2. 導入框架

import TabNavigator from 'react-native-tab-navigator';

2. TabNavigator常用屬性

3. TabNavigator.Item常用屬性

• 使用示例

render() {
        return (
            <TabNavigator>
                <TabNavigator.Item title='首頁'
                                   selected={this.state.selectedIndex == 0}
                                   titleStyle={{color:'#9d9d9d'}}
                                   selectedTitleStyle={{color:'#ed7f30'}}
                                   badgeText='首頁'
                                   allowFontScaling={false}
                                   renderIcon={()=>
                                       <Image source={{uri:'btn_home_normal'}} style={styles.iconStyle}/>
                                   }
                                   renderSelectedIcon={()=>
                                       <Image source={{uri:'btn_home_selected'}} style={styles.iconStyle}/>
                                   }
                                   onPress={()=>
                                       this.setState({
                                           selectedIndex:0
                                       })
                                   }
                >
                    <View style={[styles.viewStyle, {backgroundColor:'red'}]}>
                        <Text>首頁</Text>
                    </View>
                </TabNavigator.Item>

                <TabNavigator.Item title='我的'
                                   selected={this.state.selectedIndex == 1}
                                   titleStyle={{color:'#9d9d9d'}}
                                   selectedTitleStyle={{color:'#ed7f30'}}
                                   badgeText={10}
                                   renderIcon={()=>
                                       <Image source={{uri:'btn_user_normal'}} style={styles.iconStyle}/>
                                   }
                                   renderSelectedIcon={()=>
                                       <Image source={{uri:'btn_user_selected'}} style={styles.iconStyle}/>
                                   }
                                   onPress={()=>
                                       this.setState({
                                           selectedIndex:1
                                       })
                                   }
                >
                    <View style={[styles.viewStyle, {backgroundColor:'green'}]}>
                        <Text>我的</Text>
                    </View>

                </TabNavigator.Item>
            </TabNavigator>
        )
    }
}