闲暇之余，写了一个React Native的demo，可以作为大家的入门学习参考。

　　GitHub:https://github.com/xujianfu/React-Native-CarProject.git

　　项目截图如下：

 

　　1、React Navigation的应用

　　 React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求，它完全使用 JavaScript 编写（因此你可以阅读并理解所有源码）。支持iOS/Android.

 　　1、如何在项目进行使用？

yarn add react-navigation
# or with npm
# npm install --save react-navigation

　　然后，安装 react-native-gesture-handler。 如果你正在使用 Expo managed workflow,那么你什么都不需要做, SDK 中已经包含了这些. 否则：　　

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

　　最后进行Link 所有的原生依赖

react-native link react-native-gesture-handler

　　2、路由配置

　　为某个模块创建StackNavigator导航

const HomeStack = createStackNavigator(
    {
        Home:{
            screen:HomeScreen,
            navigationOptions:()=>({
                headerBackTitle: null,
            })
        },
         //添加多个路由
        CarLoans:CarLoansScreen,
        CheckRules:CheckRulesScreen,
    },
)

......    

　　将多个模块添加到TabNavigator上

const TabNavigator = createBottomTabNavigator(
    {
        Home:{
            screen:HomeStack,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'首页',
                tabBarIcon:({focused}) => (
                    <Image source={{uri:focused ? 'ic_tab_home_h':'ic_tab_home_n.png'}} style={styles.iconStyle}/>
                ),
            }),
        },
        Mall:{
            screen:MallStack,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'商城',
                tabBarIcon:({focused}) => (
                    <Image source={{uri:focused ? 'ic_tab_mall_h':'ic_tab_mall_n.png'}} style={styles.iconStyle}/>
                )
            }),
        },
        Publish:{
            screen:PublishStack,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'发布',
                tabBarIcon:({focused}) => (
                    <Image source={{uri:focused ? 'ic_tab_release_h':'ic_tab_release_n.png'}} style={styles.iconStyle}/>
                )
            }),
        },
        Discover:{
            screen:DiscoverStack,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'发现',
                tabBarIcon:({focused}) => (
                    <Image source={{uri:focused ? 'ic_tab_find_h':'ic_tab_find_n.png'}} style={styles.iconStyle}/>
                )
            }),
        },
        Mine:{
            screen:MineStack,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'我的',
                tabBarIcon:({focused}) => (
                    <Image source={{uri:focused ? 'ic_tab_my_h':'ic_tab_my_n.png'}} style={styles.iconStyle}/>
                )
            }),
        },
    },
    {
        defaultNavigationOptions: ({ navigation }) => {
            let tabBarVisible = true;
            if (navigation.state.index > 0) {
                tabBarVisible = false;
            }
            return {
                tabBarVisible,
            };
        },
        tabBarPosition:'bottom',
        tabBarOptions: {
            activeTintColor: 'blue', //选中tabbar的文字颜色
            inactiveTintColor: 'gray',
            showIcon:true,

        },

    }
);

export default  createAppContainer(TabNavigator);

　　2、选择相册照片或视频，或进行拍照

　　（1）引入react-native-image-picker

yarn add react-native-image-picker
react-native link react-native-image-picker

　　（2）在项目中使用react-native-image-picker

import ImagePicker from 'react-native-image-picker';

//选择图片
    selectPhotoTapped() {
        const options = {
            // 弹窗标题
            title: '选择图片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '选择照片',
            // 自定义按钮
            customButtons: [
                {name: 'fb', title: 'Choose Photo from Facebook'},
            ],
            // 相机类型'front' 或者 'back'
            cameraType: 'back',
            // 图片或视频:'photo','video'
            mediaType: 'photo',
            // 视频质量
            videoQuality: 'high',
            //最大视频录制时间
            durationLimit: 10,
            //最长宽
            maxWidth: 300,
            //最长高，
            maxHeight: 300,
            //图片质量
            quality: 0.8,
            angle: 0,
            //是否可以编辑
            allowsEditing: false,
            //如果为真，则禁用data生成的base64字段
            noData: false,
            // 如果提供此密钥，该图像将被保存在Documents iOS 应用程序的目录中，或者保存在PicturesAndroid上的应用程序目录（而不是临时目录）
            storageOptions: {
                skipBackup: true
            }
        };

        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled photo picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                let source = { uri: response.uri };

                // You can also display the image using data:
                // let source = { uri: 'data:image/jpeg;base64,' + response.data };

                this.setState({
                    avatarSource: source
                });
            }
        });
    }

    //选择视频
    selectVideoTapped() {
        const options = {

            title: '选择视频',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '录制视频',
            chooseFromLibraryButtonTitle: '选择视频',
            mediaType: 'video',
            videoQuality: 'medium'
        };

        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled video picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                this.setState({
                    videoSource: response.uri
                });
            }
        });
    }

　3、创建切换选项卡

　　导入react-native-scrollable-tab-view

npm install react-native-scrollable-tab-view --save

　　项目中引入

//引用插件
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';

<ScrollableTabView
                    initialPage={0}
                    renderTabBar={() => <ScrollableTabBar style={{borderBottomWidth: 0,height: 44}}/>}
                    tabBarTextStyle={{fontSize:16}}
                    tabBarActiveTextColor={'#fdd000'}
                    tabBarInactiveTextColor={'#999999'}
                    tabBarUnderlineStyle={{backgroundColor:'#fdd000'}}
                >
                    {
                        label.map((item,index) =>{
                            if (index === 0) {
                                return <AllBusinessScreen tabLabel={item} key={index}/>
                            } else {
                                return <NearByBusinessScreen tabLabel={item} key={index}/>
                            }
                        })
                    }
                </ScrollableTabView>

　　4、使用Modal组件

　　Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。　　

<Modal
                    animationType={"slide"}
                    transparent={true}
                    visible={this.state.modalVisible}
                    onRequestClose={()=>{alert('modal has been closed')}}
                >
                        <View style={styles.modalStyle}>
                            <View style={styles.coverStyle}>
                                {this.renderItem()}
                            </View>
                        </View>


                </Modal>


......

renderItem(){
        let itemTitleArr = ['京','沪','浙','苏','粤','鲁','晋','冀',
            '豫','川','渝','辽','吉','黑','皖','鄂',
            '湘','赣','闽','陕','甘','宁','蒙','津',
            '贵','云','桂','琼','青','新','藏'];;
        var itemArr = [];
        for (var i = 0; i < itemTitleArr.length; i++) {
            itemArr.push(
                <TouchableHighlight onPress={this.callBack.bind(this,itemTitleArr[i])} key={i}>
                    <View style={styles.chooseItemStyle} >
                        <Text style={styles.chooseTitleStyle}>{itemTitleArr[i]}</Text>
                    </View>
                </TouchableHighlight>

            )
        }
        return itemArr;
    }

　　5、React Native项目中“A+ListView”或“ListView + B”的界面搭建

　　项目中ScrollView嵌套ListView会造成手势滑动冲突，可以使用“A+ListView”或“ListView + B”的样式进行搭建，

　　通过：ListView的header或footer来实现。

　　6、地图展示　　

　　项目中使用的通过jsp API接入到高德地图。