0.55使用 native react

2017-12-25 13:59:52 IT_luntan 阅读数 2875

开场白:react-navigation导航器已经发布许久,相信有不少朋友都已经体验到了它的方便之处,现在仅做一下个人总结,早在2017年1月份,新开源的react-natvigation库备受瞩目。在短短不到3个月的时间,github上星数已达4000+。Fb推荐使用库,并且在React Native0.44中已将Navigator删除。现在的ReactNative版本已经达到0.51.0.react-navigation导航器控件会成为未来导航的主流

官方文档地址:原文的地址

该库包含三类组件:

(1)StackNavigator:用来跳转页面和传递参数

(2)TabNavigator:类似底部导航栏,用来在同一屏幕下切换不同界面

(3)DrawerNavigator:侧滑菜单导航栏,用于轻松设置带抽屉导航的屏幕

二、react-navigation使用

具体内容大致分为如下:

(1)react-navigation库属性介绍

(2)StackNavigator、TabNavigator实现界面间跳转,Tab切换

(3)StackNavigator界面间跳转、传值、取值

(4)DrawerNavigator实现抽屉导航菜单

(5)DrawerNavigator扩展功能

(6)修改源码,定制UI界面
1、StackNavigator属性介绍

navigationOptions:配置StackNavigator的一些属性。  

    title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用  
    header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null  
    headerTitle:设置导航栏标题,推荐  
    headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null  
    headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"  
    headerRight:设置导航条右侧。可以是按钮或者其他视图控件  
    headerLeft:设置导航条左侧。可以是按钮或者其他视图控件  
    headerStyle:设置导航条的样式。背景色,宽高等  
    headerTitleStyle:设置导航栏文字样式  
    headerBackTitleStyle:设置导航栏‘返回’文字样式  
    headerTintColor:设置导航栏颜色  
    headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于5.0  
    gesturesEnabled:是否支持滑动返回手势,iOS默认支持,安卓默认关闭  


screen:对应界面名称,需要填入import之后的页面  

mode:定义跳转风格  

   card:使用iOS和安卓默认的风格  

   modal:iOS独有的使屏幕从底部画出。类似iOS的present效果  

headerMode:返回上级页面时动画效果  

   float:iOS默认的效果  

   screen:滑动过程中,整个页面都会返回  

   none:无动画  

cardStyle:自定义设置跳转效果  

   transitionConfig: 自定义设置滑动返回的配置  

   onTransitionStart:当转换动画即将开始时被调用的功能  

   onTransitionEnd:当转换动画完成,将被调用的功能  

path:路由中设置的路径的覆盖映射配置  

initialRouteName:设置默认的页面组件,必须是上面已注册的页面组件  

initialRouteParams:初始路由参数 

注:大家可能对于path不太理解。path属性适用于其他app或浏览器使用url打开本app并进入指定页面。path属性用于声明一个界面路径,例如:【/pages/Home】。此时我们可以在手机浏览器中输入:app名称://pages/Home来启动该App,并进入Home界面。

2、TabNavigator属性介绍

screen:和导航的功能是一样的,对应界面名称,可以在其他页面通过这个screen传值和跳转。  


navigationOptions:配置TabNavigator的一些属性  

title:标题,会同时设置导航条和标签栏的title  

tabBarVisible:是否隐藏标签栏。默认不隐藏(true)  

tabBarIcon:设置标签栏的图标。需要给每个都设置  

tabBarLabel:设置标签栏的title。推荐  

导航栏配置  

tabBarPosition:设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top','bottom')  

swipeEnabled:是否允许在标签之间进行滑动  

animationEnabled:是否在更改标签时显示动画  

lazy:是否根据需要懒惰呈现标签,而不是提前,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐为true  

trueinitialRouteName: 设置默认的页面组件  

backBehavior:按 back 键是否跳转到第一个Tab(首页), none 为不跳转  

tabBarOptions:配置标签栏的一些属性iOS属性  

activeTintColor:label和icon的前景色 活跃状态下  

activeBackgroundColor:label和icon的背景色 活跃状态下  

inactiveTintColor:label和icon的前景色 不活跃状态下  

inactiveBackgroundColor:label和icon的背景色 不活跃状态下  

showLabel:是否显示label,默认开启 style:tabbar的样式  

labelStyle:label的样式安卓属性  

activeTintColor:label和icon的前景色 活跃状态下  

inactiveTintColor:label和icon的前景色 不活跃状态下  

showIcon:是否显示图标,默认关闭  

showLabel:是否显示label,默认开启 style:tabbar的样式  

labelStyle:label的样式 upperCaseLabel:是否使标签大写,默认为true  

pressColor:material涟漪效果的颜色(安卓版本需要大于5.0)  

pressOpacity:按压标签的透明度变化(安卓版本需要小于5.0)  

scrollEnabled:是否启用可滚动选项卡 tabStyle:tab的样式  

indicatorStyle:标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题  

labelStyle:label的样式  

iconStyle:图标样式 

3、DrawerNavigator属性介绍

DrawerNavigatorConfig  

        drawerWidth - 抽屉的宽度  
        drawerPosition - 选项是左或右。 默认为左侧位置  
        contentComponent - 用于呈现抽屉内容的组件,例如导航项。 接收抽屉的导航。 默认为DrawerItems  
        contentOptions - 配置抽屉内容  

        initialRouteName - 初始路由的routeName  
        order - 定义抽屉项目顺序的routeNames数组。  
        路径 - 提供routeName到路径配置的映射,它覆盖routeConfigs中设置的路径。  
        backBehavior - 后退按钮是否会切换到初始路由? 如果是,设置为initialRoute,否则为none。 默认为initialRoute行为  

       DrawerItems的contentOptions属性  

        activeTintColor - 活动标签的标签和图标颜色  
        activeBackgroundColor - 活动标签的背景颜色  
        inactiveTintColor - 非活动标签的标签和图标颜色  
        inactiveBackgroundColor - 非活动标签的背景颜色  
        内容部分的样式样式对象  
        labelStyle - 当您的标签是字符串时,要覆盖内容部分中的文本样式的样式对象  

从上述中大致了解了react-navigation三种组件的一些基本属性,所以到我们甩起袖子撸代码见证下奇迹了。

4、使用StackNavigator + TabNavigator实现Tab界面切换、界面间导航

API定义:StackNavigator(RouteConfigs, StackNavigatorConfig)、TabNavigator(RouteConfigs, TabNavigatorConfig)

(1)集成 react-navigation:在终端执行 【 npm install react-navigation –save 】

(2)界面中导入必要组件:

import {
    TabNavigator,
    StackNavigator,
    TabBarBottom,
} from 'react-navigation';

(3)定义TabNavigator:

const TabbrNavigator_one = TabNavigator({
    home: {
        screen: Home,
        navigationOptions: ({navigation, screenProps}) => ({
            tabBarLabel: '美食',
            tabBarIcon: ({tintColor, focused}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('../images/ico_service_normal.png')}
                    selectedImage={require('../images/ico_service_pressed.png')}
                />
            ),
        }),
    },
    service: {
        screen: Service,
        navigationOptions: ({navigation, screenProps}) => ({
            tabBarLabel: '电影',
            tabBarIcon: ({tintColor, focused}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('../images/ico_service_normal.png')}
                    selectedImage={require('../images/ico_service_pressed.png')}
                />
            ),
        }),
    },
    mine: {
        screen: Minee,
        navigationOptions: ({navigation, screenProps}) => ({
            tabBarLabel: '酒店',
            // header: null,
            tabBarIcon: ({tintColor, focused}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('../images/ico_service_normal.png')}
                    selectedImage={require('../images/ico_service_pressed.png')}
                />
            ),
        }),
    }
}, {
    initialRouteName: 'home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    backBehavior: 'none',
    tabBarOptions: {
        activeTintColor: 'rgb(255, 219, 60)',
        inactiveTintColor: 'black',
        showIcon: true,
        showLabel: true,
        indicatorStyle: {
            height: 0
        },
        style: {
            backgroundColor: 'rgb(255, 255, 255)',
        },
        labelStyle: {
            fontSize: 12,
            color: 'blue'
        },
    },

});

TabBarItem为封装的组件:

import React, { Component } from 'react';
import {
    Image,
} from 'react-native';

export default class TabBarItem extends Component {

    static defaultProps = {
        tintColor: null,
        focused: null,
        normalImage: null,
        selectedImage: null,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            tintColor: props.tintColor,
            focused: props.focused,
            normalImage: props.normalImage,
            selectedImage: props.selectedImage,
        };
    }

    render() {

        return(
            <Image source={this.state.focused ? this.state.selectedImage : this.state.normalImage}
                   style={{
                       // tintColor: this.state.tintColor,
                       width: 25,
                       height: 25
                   }}/>
        );
    }
}

可以看到,我们定义了一个名称为【Tab】的TabNavigator的导航组件。在组件中,分为两层参数:

(1)第一层参数定义了要切换的界面,即【首页】、【我】两个界面组件,通过screen属性指定。并且通过navigationOptions属性设置相关属性参数。

(2)设置导航栏的属性参数。

TabNavigator定义好之后,需要用StackNavigator,顾名思义,StackNavigator就是以栈的方式来存放整个界面的,而TabNavigator是作为一个界面内不同子界面之间切换。所以还需要我们定义StackNavigator:

const AppNavigator = StackNavigator({

    tabBarOne: {
        screen: TabbrNavigator_one,
    },
    tabBarTwo: {
        screen: CityLevel_two,
        navigationOptions: ({navigation, screenProps}) => ({
            headerLeft: (<NavBarLeftItem imgHidden={false}
                                         onClick={() => navigation.goBack()}
                                         image={require('../images/ico_service_pressed.png')}
                                         imgH={20}
                                         imgW={12}/>),
        }),
    },
    ...Components,//其他文件写到Components里面
}, {
    initialRouteName: 'login',
    navigationOptions: ({navigation, screenProps}) => ({
        headerStyle: {
            backgroundColor: 'blue',
            shadowOpacity: 0,

        },
        headerTitleStyle: {
            alignSelf: 'center',
            color: 'white',
            fontSize: 12,
        },
        headerBackTitleStyle: {
            alignSelf: 'center',
            color: 'white',
        },
        headerTintColor: 'white',
        gesturesEnabled: true,
    }),
    mode: 'card',
    headerMode: 'float',
    onTransitionStart: () => {
        console.log('导航栏切换开始')
    },
    onTransitionEnd: () => {
        console.log('导航栏切换结束')
    },
});

看起来和TabNavigator很相似,同样是指定了两个参数:

(1)指定要跳转的界面组件。同样是screen属性标识界面组件,不多赘述。

(2)定义跳转属性参数,即顶部导航栏的一些参数设置和跳转方式。

可以看到,我们将Tab作为一个界面设置到了StackNavigator。这样就可以实现Tab导航和界面间跳转的效果了。

最后就是在render中引用StackNavigator:

import {AppNavigator} from './src/router/Router';

export default class App extends Component<{}> {
    render() {
        return (
            <AppNavigator/>
        );
    }
}

StackNavigator还提供了onNavigationStateChange回调方法,用来监听导航状态的改变。具体不再赘述。实现了界面跳转和切换,那么就该来增加下界面之间的感情了,来看看如何实现界面之间的传值和取值。

5**、界面间跳转、传值、取值**
在界面组件注入到StackNavigator中时,界面组件就被赋予了navigation属性,即在界面组件中可以通过【this.props.navigation】获取并进行一些操作。

navigation属性中提供了很多的函数简化界面间操作,简单列举几点:

(1)通过navigate函数实现界面之间跳转:

this.props.navigation.navigate('Mine');  

参数为我们在StackNavigator注册界面组件时的名称。同样也可以从当前页面返回到上一页:

 // 返回上一页  
    this.props.navigation.goBack();  

(2)跳转时传值:

const {navigate, params, dipatch, goBack} = this.props.navigation;
        navigate('tabBarTwo', {login_title: '济南'});

(3)获取值:

static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: `${navigation.state.params.login_title}`,
    });

通过state.params来获取传来的参数,后面为key值。此处为login_title。
OK,简单的react-navigation就这样搭建使用完成了。
效果图如下:
这里写图片描述
这里写图片描述
这里写图片描述
代码地址自行下载参考:参考地址

2018-06-30 18:03:45 problc 阅读数 542

之前配置过RN,但是新版本有些东西变了。重新配置了一下,记录一下过程

ref:

https://facebook.github.io/react-native/docs/integration-with-existing-apps

https://www.jianshu.com/p/a133d7e45aed

https://www.jianshu.com/p/284e05eba766


1、创建xcode project


2、pod init
platform :ios, '9.0'
target 'RNDemo' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
  platform :ios, '9.0'
  # Pods for RNDemo
  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => 'RNComponent/node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => 'RNComponent/node_modules/react-native/ReactCommon/yoga'
end


3、创建RNComponent目录
cd RNComponent


4、初始化node_modules
brew install yarn
yarn add react-native

yarn add react@16.3.1


{
"dependencies": {
"react": "16.3.1",
"react-native": "^0.55.4"
}
}


创建index.ios.js文件
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';


class RNHighScores extends React.Component {
  render() {
    var contents = this.props['scores'].map((score) => (
      <Text key={score.name}>
        {score.name}:{score.value}
        {'\n'}
      </Text>
    ));
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>2048 High Scores!</Text>
        <Text style={styles.scores}>{contents}</Text>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);


5、pod install创建workspace
sudo xcode-select --switch /Applications/Xcode.app
xcrun -k --sdk iphoneos --show-sdk-path
pod install


6、启动react-native
yarn global add react-native-cli
react-native start

这样http://localhost:8081/index.ios.bundle?platform=ios 就可以访问了


7、配置NSTemporaryExceptionAllowsInsecureHTTPLoads

<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>


8、RCTRootView当做UIView就可以运行
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                moduleName: @"RNHighScores"
                         initialProperties:
     @{
       @"scores" : @[
               @{
                   @"name" : @"Alex",
                   @"value": @"42"
                   },
               @{
                   @"name" : @"Joel",
                   @"value": @"10"
                   }
               ]
       }
                             launchOptions: nil];
2018-05-31 22:12:29 qq_35394891 阅读数 103

触发监听的页面

componentDidMount() {
    this.listener = DeviceEventEmitter.addListener('favoriteChanged_popular',this.FavoriteChanged());
    this.loadData();
}

备注:this.FavoriteChanged()是在接受到通知时触发的函数

           this.loadData()是重新刷新数据

发送通知的页面

DeviceEventEmitter.emit('favoriteChanged_popular');
备注:向监听名称为favoriteChanged_popular的页面发送通知,注意可以传参


2018-05-21 11:28:51 cx091 阅读数 1039

react-native version mismatch

代码没有改动出任就打不开跑不起来如下图所示:

模拟器类似于这种错误


解:

有人添加了这个https://bintray.com/weimob/maven/react-native/0.55.3,它会打破jcenter()在项目存储库中指定的所有React Native Android版本。为了避免这个问题,你应该android/app/build.gradle像这样在文件中强制React Native版本compile (“com.facebook.react:react-native:0.52.0”) { force = true }。更改0.52.0为您使用的版本。
这里写图片描述

2018-09-14 21:43:40 chensenp 阅读数 2386

React Native升级0.57.4版本教程,及解决0.57.4版本和Xcode10报错问题

基于 Git 的自动合并更新

react-native-git-upgrade提供了豪华的一条龙自动合并更新流程

1. 安装 Git

你需要安装 Git,但这并不要求你自己使用 Git 去管理项目,只是我们的更新过程会使用到 Git 罢了。你可以在这里下载安装 Git,注意要把 Git 的路径添加到PATH变量中。

2. 安装react-native-git-upgrade工具模块

react-native-git-upgrade工具模块提供了命令行命令,因而需要全局安装(-g):

$ npm install -g react-native-git-upgrade

3. 运行更新命令

$ react-native-git-upgrade
# 这样会直接把react native升级到最新版本

# 或者是:

$ react-native-git-upgrade X.Y.Z
# 这样把react native升级到指定的X.Y.Z版本

升级过程会如丝般顺滑。当然在少数情况下,取决于具体的版本和你修改的程度,Git 的合并算法也可能遭遇失败产生一些冲突,需要你人工介入。

4. 解决冲突

文件中的冲突会以分隔线隔开,并清楚的标记出处,例如下面这样:

13B07F951A680F5B00A75B9A /* Release */ = {
  isa = XCBuildConfiguration;
  buildSettings = {
    ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
    CODE_SIGN_IDENTITY = "iPhone Developer";
    FRAMEWORK_SEARCH_PATHS = (
      "$(inherited)",
      "$(PROJECT_DIR)/HockeySDK.embeddedframework",
      "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
    );
=======
    CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
    HEADER_SEARCH_PATHS = (
      "$(inherited)",
      /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
      "$(SRCROOT)/../node_modules/react-native/React/**",
      "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
    );

上面代码中的"ours"表示你自己的代码,而"theirs"表示 React Native 的官方代码。然后你可以根据实际情况判断,选择某一方晋级,另一方出局。

以下是我托管在Github上的代码, 这些是升级变更文件,升级后需要逐个检查,有冲突的按照以上方法解决

附:解决升级到Xcode10,react native项目运行报错问题

更多详情:https://reactnative.cn/docs/upgrading/

这是我的项目,如果对你有帮助,欢迎star:https://github.com/SemperChen/NovelAPP

演示视频:https://www.bilibili.com/video/av28309525/

截图