React Native Redux 2
=============================================================

:Date: 12 Oct 2019

What is the idea?
-----------------------

- Last time we used **expo**, but some libraries are not functioning well with it. Specifically `react native video controls <https://github.com/itsnubix/react-native-video-controls>`_

- Therefore we will turn to **React Native CLI**
- You can just follow the guide on the official website, and notice several Issues I encountered

Issues
----------------

- :code:`SDK location not found`
    - Go to the :code:`android/` directory of your react-native project
    - Create a file called :code:`local.properties` with this line:
    - :code:`sdk.dir = .../Android/Sdk`
    - For me: :code:`sdk.dir = /home/teslacat/Android/Sdk`

- The developer mode for XiaoMi is stupid!
    - Version :code:`MIUI 10.3.4`
    - Go to :code:`Settings/My device/All specs/`
    - Tap :code:`MIUI version` for 10000 times
    - Go to :code:`Settings/Additional settings/Developer options/`
    - Make sure :code:`USB debugging` and :code:`Install via USB` are on. For latter you need to sign in to MI Account

- Of course you can use exactly the same code as last time. But don't forget to install dependencies! 

.. code-block:: console

    npm install react-native-gesture-handler react-redux redux react-navigation-stack react-navigation

- Work flow
    - :code:`sudo react-native run-android` : This installs the App via USB to your phone. A message will show up in your phone and you need to allow the installation
    - :code:`sudo react-native start` : This starts a server on your laptop. Note you need to execute :code:`adb reverse tcp:8081 tcp:8081` as stated in the official guide
    - Now open the app on your phone, it then will fetch data from the server running on your computer
    - Unlike Expo, once you make changes to your **code**, you need to restart the App. And you need to reinstall it if you add a **new package** 

 
components/Home.js: Gesture Responder
----------------------------------------

- Added :code:`PanResponder` to handle Swipe 

- Added :code:`react-native-video`

- Added :code:`react-native-orientation` to make default orientation Landscape

- Added my own :code:`ModalExample`

.. code-block:: text

    import React,{Component} from 'react'
    import {StyleSheet,View,Text,Button,PanResponder} from 'react-native'
    import {bindActionCreators} from 'redux'
    import {connect} from 'react-redux'
    import Video from 'react-native-video'
    import Orientation from 'react-native-orientation'

    import ModalExample from './ModalExample'

    class Home extends Component{
        constructor(props) {
            super(props);
            this._panResponder = PanResponder.create({
                onStartShouldSetPanResponder: (evt, gestureState) => true,
                onPanResponderRelease: (evt, gestureState) => {
                    this.props.changeMovie()
                },
            })
            Orientation.lockToLandscape()
        }

        render(){
            return(
                <View style={{flex:1,flexDirection:'row'}}>
                    <View style={{flex:8,flexDirection:'row',backgroundColor:'black'}}
                        {...this._panResponder.panHandlers}>
                            <Video source={{uri:"https://youku.com-ok-pptv.com/20190927/7452_75e64cba/index.m3u8"}}
                                style={{height:"100%", width:"100%"}}
                                controls={true} resizeMode={"contain"} />
                    </View>
                    <View style={{flex:1,flexDirection:'row',backgroundColor:'black',padding:3}}>
                        <View style={{flexDirection:'column'}}>
                            <Text style={{color:"white"}}>划动即可随机切换！</Text>
                            <Text style={{color:"white"}}>正在播放:</Text>
                            <Text style={{color:"white"}}>{this.props.Home.currentMovie}</Text>
                            <ModalExample prop={{label:"播单", data:"111"}}>
                            </ModalExample>
                            <ModalExample prop={{label:"选集", data:"222"}}>
                            </ModalExample>
                            <ModalExample prop={{label:"评论", data:"333"}}>
                            </ModalExample>
                            <ModalExample prop={{label:"设置", data:"444"}}>
                            </ModalExample>
                        </View>
                    </View>
                </View>
            )
        }
    }

    //===============================
    // Begin Actions
    //===============================
    const changeMovie = payload=>({
        type: "changeMovie",
        payload: payload
    })
    // End Actions

    const mapStateToProps=(state)=>{
        const {Home}=state
        return {Home}
    }
    const mapActionToProps=action=>(
        bindActionCreators({changeMovie},action)
    )
    export default connect(mapStateToProps,mapActionToProps)(Home)


components/ModalExample.js
----------------------------------------

.. code-block:: jsx

    import React,{Component} from 'react'
    import {StyleSheet,View,Modal,Text,Button,TouchableOpacity} from 'react-native'

    class ModalExample extends Component{
      state={modalVisible:false}
      flipModal=()=>{
        this.setState({modalVisible: !this.state.modalVisible})
      }

      render(){
        return(
          <View>
            <Modal animationType="slide" transparent={true}
              visible={this.state.modalVisible}>
              <View style={{alignItems:'flex-end',paddingRight:"15%"}}>
                <TouchableOpacity style={styles.button}
                  onPress={()=>this.flipModal()}><Text>收起</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button}
                  onPress={()=>this.flipModal()}>
                  <Text>{this.props.prop.data}</Text>
                </TouchableOpacity>
              </View>
            </Modal>
            <TouchableOpacity style={styles.button}
              onPress={()=>this.flipModal()}>
              <Text>{this.props.prop.label}</Text>
            </TouchableOpacity>
          </View>
        )
      }
    }

    const styles = StyleSheet.create({
      button:{
        backgroundColor:"lightblue",
        alignItems:'center',
        padding:10,
        margin:2,
        width:90,
        borderRadius: 15,
      }
    })

    export default ModalExample