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

• 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

• SDK location not found

  • Go to the android/ directory of your react-native project

  • Create a file called local.properties with this line:

  • sdk.dir = .../Android/Sdk

  • For me: sdk.dir = /home/teslacat/Android/Sdk

• The developer mode for XiaoMi is stupid!

  • Version MIUI 10.3.4

  • Go to Settings/My device/All specs/

  • Tap MIUI version for 10000 times

  • Go to Settings/Additional settings/Developer options/

  • Make sure USB debugging and 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!

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

• Work flow

  • 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

  • sudo react-native start : This starts a server on your laptop. Note you need to execute 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 PanResponder to handle Swipe

• Added react-native-video

• Added react-native-orientation to make default orientation Landscape

• Added my own ModalExample

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

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