一、初始化項(xiàng)目

??1箱残、在終端執(zhí)行react-native init MyApp 創(chuàng)建的ReactNative項(xiàng)目版本號與你終端安裝的ReactNative版本號相同

??2、在終端執(zhí)行react-native init MyApp --version 0.44.0可指定ReactNative版本創(chuàng)建項(xiàng)目

二剩胁、TabNavigator使用

??1截粗、在終端執(zhí)行命令npm install react-native-tab-navigator --save進(jìn)行安裝(加上--save才會添加到package.json文件中)

??2、在index.ios.js文件中導(dǎo)入import TabNavigator from 'react-native-tab-navigator';

??3蟋定、在render()中加入代碼

        <TabNavigator>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_popular'}
                selectedTitleStyle={{color:'red'}}
                title='最熱'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_popular'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_trending'}
                selectedTitleStyle={{color:'red'}}
                title='趨勢'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_trending'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_favorite'}
                selectedTitleStyle={{color:'red'}}
                title='收藏'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_favorite'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_my'}
                selectedTitleStyle={{color:'red'}}
                title='我的'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_trending.png')} />}
                onPress={() => this.setState({selectedTab: 'tb_my'})}>
                <View style={styles.page2}></View>
            </TabNavigator.Item>
          </TabNavigator>

??index.ios.js的完整代碼為:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

export default class imoocc extends Component {
  constructor(props){
    super(props);
    this.state={
      selectedTab:'tb_popular',
    }
  }
  render() {
    return (
      <View style={styles.container}>
          <TabNavigator>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_popular'}
                selectedTitleStyle={{color:'red'}}
                title='最熱'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_popular'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_trending'}
                selectedTitleStyle={{color:'red'}}
                title='趨勢'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_trending'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_favorite'}
                selectedTitleStyle={{color:'red'}}
                title='收藏'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
                badgeText="1"
                onPress={() => this.setState({selectedTab: 'tb_favorite'})}>
                <View style={styles.page1}></View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tb_my'}
                selectedTitleStyle={{color:'red'}}
                title='我的'
                renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')}/>}
                renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_trending.png')} />}
                onPress={() => this.setState({selectedTab: 'tb_my'})}>
                <View style={styles.page2}></View>
            </TabNavigator.Item>
          </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  page1:{
    flex:1,
    backgroundColor:'red',
  },
  page2:{
    flex:1,
    backgroundColor:'yellow',
  },
  image:{
    height:22,
    width:22
  },

});

AppRegistry.registerComponent('imoocc', () => imoocc);

Navigator的基本使用

??1、使用流程

屏幕快照 2018-09-18 上午11.13.14.png

??2草添、使用import {Navigator} from 'react-native-deprecated-custom-components';進(jìn)行導(dǎo)入驶兜。頁面在渲染的時候會調(diào)用renderScene方法

??3、示例

render() {
    return (
      <Navigator
            /*初始化路由远寸，Navigator首先顯示的是哪一個界面抄淑。默認(rèn)頁面,
            name: 默認(rèn)頁面組件名, component: 默認(rèn)頁面渲染組件*/
           initialRoute={{ name: 'Boy', component: Boy }}
           // 頁面切換動畫
           configureScene={(route) => {
               return Navigator.SceneConfigs.VerticalDownSwipeJump;
           }}
           /* 頁面在渲染的時候會調(diào)用  將頁面參數(shù)和navigator注入渲染組件中 */
           renderScene={(route, navigator) => {
               let Component = route.component;
               return <Component {...route.params} navigator={navigator} />
           }}
     />
    )
  }

??4、Navigator方法

getCurrentRoutes() - 獲取當(dāng)前棧里的路由驰后，也就是push進(jìn)來肆资，沒有pop掉的那些。
jumpBack() - 跳回之前的路由灶芝，當(dāng)然前提是保留現(xiàn)在的郑原，還可以再跳回來，會給你保留原樣夜涕。
jumpForward() - 上一個方法不是調(diào)到之前的路由了么犯犁，用這個跳回來就好了。
jumpTo(route) - 跳轉(zhuǎn)到已有的場景并且不卸載女器。
push(route) - 跳轉(zhuǎn)到新的場景酸役，并且將場景入棧，你可以稍后跳轉(zhuǎn)過去
pop() - 跳轉(zhuǎn)回去并且卸載掉當(dāng)前場景
replace(route) - 用一個新的路由替換掉當(dāng)前場景
replaceAtIndex(route, index) - 替換掉指定序列的路由場景
replacePrevious(route) - 替換掉之前的場景
resetTo(route) - 跳轉(zhuǎn)到新的場景，并且重置整個路由棧
immediatelyResetRouteStack(routeStack) - 用新的路由數(shù)組來重置路由棧
popToRoute(route) - pop到路由指定的場景涣澡，在整個路由棧中贱呐，處于指定場景之后的場景將會被卸載。
popToTop() - pop到棧中的第一個場景暑塑，卸載掉所有的其他場景吼句。

??5、Navigator屬性

??initialRoute object

??提供一個路由集合用來初始化事格。如果沒有設(shè)置初始路由的話則必須設(shè)置該屬性。如果沒有提供該屬性搞隐，它將被默認(rèn)設(shè)置成一個只含有initialRoute的數(shù)組驹愚。

??initialRoute示例

           /*初始化路由，Navigator首先顯示的是哪一個界面劣纲。默認(rèn)頁面,
            name: 默認(rèn)頁面組件名, component: 默認(rèn)頁面渲染組件*/
           initialRoute={{ name: 'Boy', component: Boy }}

??configureScene function

??可選的函數(shù)逢捺，用來配置場景動畫和手勢。會帶有兩個參數(shù)調(diào)用癞季，一個是當(dāng)前的路由劫瞳，一個是當(dāng)前的路由棧。然后它應(yīng)當(dāng)返回一個場景配置對象

?? configureScene示例

(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

??或者

         // 頁面切換動畫
           configureScene={(route) => {
               return Navigator.SceneConfigs.PushFromRight;
           }}

??SceneConfigs的值為

Navigator.SceneConfigs.PushFromRight (默認(rèn))
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

??renderScene function

??必要參數(shù)绷柒。用來渲染指定路由的場景志于。調(diào)用的參數(shù)是路由和導(dǎo)航器。

??renderScene示例

(route, navigator) =>
  <MySceneComponent title={route.title} navigator={navigator} />

??或者

         /* 頁面在渲染的時候會調(diào)用  將頁面參數(shù)和navigator注入渲染組件中 */
           renderScene={(route, navigator) => {
               let Component = route.component;
               return <Component {...route.params} navigator={navigator} />
           }}

??initialRouteStack [object]

??提供一個路由集合用來初始化废睦。如果沒有設(shè)置初始路由的話則必須設(shè)置該屬性伺绽。如果沒有提供該屬性，它將被默認(rèn)設(shè)置成一個只含有initialRoute的數(shù)組嗜湃。

??navigationBar node

??可選參數(shù)奈应，提供一個在場景切換的時候保持的導(dǎo)航欄。

??navigator object

??可選參數(shù)购披，提供從父導(dǎo)航器獲得的導(dǎo)航器對象杖挣。

??onDidFocus function

??每當(dāng)導(dǎo)航切換完成或初始化之后，調(diào)用此回調(diào)刚陡，參數(shù)為新場景的路由

??onWillFocus function

??會在導(dǎo)航切換之前調(diào)用惩妇，參數(shù)為目標(biāo)路由

??sceneStyle [View#style]

??將會應(yīng)用在每個場景的容器上的樣式。

??

彈出視圖(三方：react-native-popover)

直接把popover.js文件導(dǎo)入項(xiàng)目中

示例代碼：

<Popover
            isVisible={this.state.isVisible}
            fromRect={this.state.buttonRect}
            placement="bottom"
            onClose={()=>this.closePopover()}
            contentStyle={{backgroundColor:'#343434',opacity:0.82}}
        >
            {timeSpanTextArray.map((result,i,arr)=>{
              return <TouchableOpacity
                  key={i}
                  underlayColor='transparent'
                  onPress={()=>this.onSelectTimeSpan(arr[i])}
                  >
                  <Text

                     style={{fontSize:18,color:'white',fontWeight:'400',padding:8}}
                  >{arr[i].showText}</Text>
              </TouchableOpacity>
            })}

        </Popover>

彈出視圖的代碼:其中button為自己設(shè)置的標(biāo)識

showPopover(){
    this.refs.button.measure((ox,oy,width,height,px,py) => {
      this.setState({
        isVisible:true,
        buttonRect:{x:px,y:py,width:width,height:height}
      });
    });
  }

關(guān)閉彈出視圖的代碼:

closePopover(){
    this.setState({
        isVisible:false
    })
  }