React-native Project Combat (i)

PrefaceThis article has a companion video that can be viewed as appropriate. The content of the text is different from the understanding of each person, may have some deviations, welcome friends to contact me. All the contents of this article are for the purpose of learning and communication, not for commercial purposes, such as the relevant laws and regulations arising from the responsibility, and I have nothing to do. If the contents of this article cause inconvenience to you, please contact 277511806@qq.com processing, thank you. Reprint Trouble Annotated source, thank you.

Information: Link: https://pan.baidu.com/s/1b3abwy Password: K8P5

SOURCE hosting to GitHub , need to source the point I download, like the words remember Star, thank you. ES5 to ES6 about ES6 Grammar, we suggest you can see the Ecmascriot 6 quickly understand the words, we can refer to the ES6 Grammar Quick Start Project Introduction First look at the effect of the app we modeled:

From the above figure, we can see that the complexity is not very big, but the time relationship we try to do all the modules are done, and improve the details.

:

It is recommended to open the video with text learning, in case there are some details not mentioned in the text, but the content in the text (according to the feedback corresponding update)

The choice of this app, and my personal hobbies, of course, the key is because the app is not complex, including the common app on the market style, and very smoothly to get all the request parameters and image resources, it is suitable for us to experience react-native The general development process. Project Analysis

Before developing the app, the product manager will conduct a general analysis of the requirements, then meet to discuss the technologies that need to be used in the development process, the difficulties encountered, assign the appropriate tasks, listen to the developer's comments and make the appropriate changes, finalize the overall prototype, the development process, the technology, the cycle, and, of course, UI intervention. We do not have a product manager, the UI is also available, so we will roughly divide the following pieces:

Demand Analysis: This app is mainly through the grasp of the major e-commerce platform of the Commodity preferential information screening, classification and ultimately show to the user, so that users can easily, quickly, real-time access to high-quality information.

Development model: Our side is similar based on prototype model development.

Technology used:react-native

Function module: mainly divided into the homepage, the Sea Amoy module, the hour list of three modules and other ancillary modules (as appropriate, increase).

Overall structure: The main body: by TabBar as the main frame, to the home page, Sea Amoy module, the hour billboard as a whole module, according to the effect of the prototype map selection of the corresponding jump mode data display: According to the prototype diagram Select the appropriate data presentation method

Naming rules: Reference Code Specification documents (differences between different companies, depending on the company to provide the documents, this side first abide by the rules mentioned below)

Test: Mdzz, who tested →→. Engineering Environment Configuration

Click to download all the resources you need to use.

First, configure the IOS side. Replace the images.xcassets folder in the zipped package with the images.xcassets folder in our iOS project directly. At this point we can see that all the image resources have been successfully imported into the iOS project, then we click on the project file to make some necessary configuration. General--app Icons and Launch images--modify Launch Images Source for images.xcassets in Launchimage folder , clear Except for the Launch screen File content. General--deployment info-- Device Orientation --only the Portrait option is reserved. Open the info.plist file, locate the Bundle name option, and modify its contents to Browse for lost learning Open the info.plist file and find the App TRANSP Ort the Security Settings option, add the Allow arbitrary Loads option to it and set the content to YES (if you can ignore this step using the IPV6 standard) OK, so C14>ios End configuration is complete.

Next, configure the Android side. Copy and paste the drawable-xxhdpi folder within the compressed package into gd/android/app/src/main/res/ .

Set the app icon into gd/android/app/sec/ open androidmanifest file, modify the Android:icon entry as follows:

    <applicatio>
        android:icon= "@drawable/icon"
    </application>

Set the app name into gd/android/app/src/main/res/values/ , open the strings.xml file and make the following changes:

    <resources>
        <string name= "App_name" > Lost learning </string>
    </resources>

OK, so far AndroidConfiguration is complete.

directory structure and naming rules in order to facilitate understanding, we do not follow the normal development of the react-native development structure, the subsequent chapters are slowly changing this way we divide the file into main (entrance), Home (home), HT (Sea Amoy), Hourlist (Hourly leaderboard) 4 Most of the relevant files into the corresponding folder, to avoid the development of frequent changes in the document to the novice to bring irritability naming rules:
Folder naming we'll follow react-native. By default, we use lowercase + underscores to name the names of the files we used the name function, constants, variables, etc. using the hump naming The

Directory structure:

Camel : The Hump naming rules: The first letter lowercase, the subsequent words start with capital, details click on the hump name to read. Pascal naming rules: Similar to the hump, but the first letter to uppercase, details click on the Pascal name to read. Underline naming rules: You use underscores to split words. third-party frameworks

This way, under react-native . How to import a third-party framework

First of all, the third-party framework is definitely going to go to GitHub. Search for React-native-tab-navigator within the search box. As explained in the following instructions , using the terminal--into the project's main directory--Copy the command line ()--enter--wait for the download to be completed and imported into the project. To this, the third-party framework import is complete, and the use is mentioned below. Main Frame Construction

The above mentioned using TabBar as the main frame, but the official only provides iOS Tabbarios , Time reason in order to speed up the development progress, and incidentally the third party framework use so we use < React-native-tab-navigator> for development

Since you want to use the framework, you must first introduce the framework file.

   Reference to the third-party framework
   import tabnavigator from ' React-native-tab-navigator ';

Under Instructions for useDocuments can be seen, the use of methods and official TabbariosSimilar (unclear trouble reference react Native Tabbarios and Tabbarios.item use), so we put three major modulesAdded into the Tabbar, and each module is NavigatorThe form exists.

export default class GD extends Component {
/ / ES6
/ / structure
constructor(props) {
super(props);
//Initial state
this.state = {
selectedTab:'home',
}
}
//Return the item of tabbar
renderTabBarItem(title, selectedTab, image, selectedImage, component) {
Return (
<TabNavigator.Item
selected={this.state.selectedTab === selectedTab}
title={title}
selectedTitleStyle={{color:'black'}}
renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}
renderSelectedIcon={() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}
onPress={() => this.setState({ selectedTab: selectedTab })}>
//Add navigation
<Navigator
//Set route
initialRoute={{
name:selectedTab,
component:component
P
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
P
> >
</TabNavigator.Item>
);
}
Render () {
Return (
<TabNavigator>
{/ * first page * /}
{this.rendertabbaritem ("home", "tabbar home", "tabbar home", "selected", "home)}
{/ * overseas shopping * /}
{this. Rendertabbaritem ("overseas", "HT", "tabbar",'tabbar ",'selected",'ht)}
{/ * hour charts * /}
{this. Rendertabbaritem ("hourly list," "hourly list," "tabbar",'tabbar ",'selected",'hourlist)}
</TabNavigator>
);
}
}
const styles = StyleSheet.create({
Container: {
Flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
tabbarIconStyle: {
width:Platform.OS === 'ios' ? 30 : 25,
height:Platform.OS === 'ios' ? 30 : 25,
}
};

At this point, the main frame is completed.

customizing navigation Bar Styles

As can be seen from the renderings, the navigation bar style is similar, because we have already set the Navigator , this way we also need to customize the Navigator style, you can see all the Navigator The styles are similar, so we're going to pull this out and let all the Navigator share a component.

So first we create the gdcommunalnavbar file in the main folder and initialize the basic content.

Then, we look at the Ere page navigation bar, the home navigation bar has left and right three buttons, the left half an hour hot, in the middle for the click Drop-down to display the list of platforms that support filtering, the right is the product search, usually Navigator also only these 3 components, for users to highly customized, Here we only set the layout of the 3 components in Currencynavbar , then provide the interface, get the externally passed-in values, and internally determine whether the corresponding component needs to be created.

export default class GDCommunalNavBar extends Component {
static propTypes = {
leftItem:PropTypes.func,
titleItem:PropTypes.func,
rightItem:PropTypes.func,
}
/ / left
renderLeftItem() {
if (this.props.leftItem === undefined) return;
return this.props.leftItem();
}
/ / middle
renderTitleItem() {
if (this.props.titleItem === undefined) return;
return this.props.titleItem();
}
/ / right
renderRightItem() {
if (this.props.rightItem === undefined) return;
return this.props.rightItem();
}
Render () {
Return (
<View style={styles.container}>
{/ * left * /}
<View>
{this.renderLeftItem()}
</View>
{/ * middle * /}
<View>
{this.renderTitleItem()}
</View>
{/ * right * /}
<View>
{this.renderRightItem()}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
Container: {
Width:width,
height:Platform.OS === 'ios' ? 64 : 44,
backgroundColor:'white',
flexDirection:'row',
justifyContent:'space-between',
alignItems:'center',
borderBottomWidth:0.5,
borderBottomColor:'gray',
paddingTop:Platform.OS === 'ios' ? 15 : 0,
}
};

This way, we're done. NavigatorStyle, we go to the home page to use, look good, use this side will not say (1. Refer to external files; 2. first half hour popularThis way, we'll start from half-hour hotTo start with, like this data show, we must be the preferred choice ListViewwhich CellThe style decomposition is as follows:

We first request the data, determine the correct data to be obtained, and then define the cell style.

Next we're going to define the cell style.

export default class GDCommunalNavBar extends Component {
static propTypes = {
image:PropTypes.string,
title:PropTypes.string,
}
Render () {
Return (
<View style={styles.container}>
{/ * left picture * /}
<Image source={{uri:this.props.image}} style={styles.imageStyle} />
In the middle of {/ * * /}
<View>
<Text numberOfLines={3} style={styles.titleStyle}>{this.props.title}</Text>
</View>
{/ * arrow to the right * /}
<Image source={{uri:'icon_cell_rightArrow'}} style={styles.arrowStyle} />
</View>
);
}
}
const styles = StyleSheet.create({
Container: {
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between',
backgroundColor:'white',
Height:100,
Width:width,
borderBottomWidth:0.5,
borderBottomColor:'gray',
marginLeft:15
}
imageStyle: {
Width:70,
Height:70,
}
titleStyle: {
width:width * 0.65,
}
arrowStyle: {
Width:10,
Height:10,
marginRight:30
}
};

All right, here we go. CellThe style is also defined to be complete and the effect is the same.

export default class GDHalfHourHot extends Component {
/ / structure
constructor(props) {
super(props);
//Initial state
this.state = {
dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}),
}
/ / binding
this.fetchData = this.fetchData.bind(this);
}
//Network request
fetchData() {
fetch('http://guangdiu.com/api/gethots.php')
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.data)
};
}
.done ()
}
popToHome() {
this.props.navigator.pop();
}
//Back to middle button
renderTitleItem() {
Return (
< text style = {styles. Navbartitleitemstyle} > popular in nearly half an hour < / text >
);
}
//Back to right button
renderRightItem() {
Return (
<TouchableOpacity
onPress={()=>{this.popToHome()}}
>
< text style = {styles. Navbarrightitemstyle} > Close < / text >
</TouchableOpacity>
);
}
//Return the cell style of each line
renderRow(rowData) {
Return (
<CommunalHotCell
image={rowData.image}
title={rowData.title}
> >
);
}
componentDidMount() {
this.fetchData();
}
Render () {
Return (
<View style={styles.container}>
{/ * navigation bar style * /}
<CommunalNavBar
titleItem = {() => this.renderTitleItem()}
rightItem = {() => this.renderRightItem()}
> >
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
showsHorizontalScrollIndicator={false}
style={styles.listViewStyle}
> >
</View>
);
}
}
const styles = StyleSheet.create({
Container: {
Flex:1,
alignItems: 'center',
}
navbarTitleItemStyle: {
FontSize:17,
color:'black',
marginLeft:50
}
navbarRightItemStyle: {
FontSize:17,
color:'rgba(123,178,114,1.0)',
marginRight:15
}
listViewStyle: {
Width:width,
}
};

As can be seen from the effect diagram, we also lack the above tip title, this is very simple, we also to quickly complete some

    {/* Top tip */}
    <view style={styles.headerpromptstyle}>
        <Text> updates every 5 minutes </Text> </view according to the click of each discount
    >

Style section:

    Headerpromptstyle: {
        height:44,
        width:width,
        backgroundcolor: ' Rgba (239,239,239,0.5) ',
        Justifycontent: ' Center ',
        alignitems: ' Center '
    }

Hide and display conditions are hidden from the use configuration of the notification that displays Tabbar Tabbar

    ES6
    //Construction
      Constructor (props) {
        super (props);
        Initial state
        this.state = {
            selectedtab: ' Home ',
            ishiddentabbar:false,   //whether hidden Tabbar
        };
      }

   <tabnavigator
                Tabbarstyle={this.state.ishiddentabbar!== true? {}: {height:0, overflow: ' Hidden '}}
                Scenestyle={this.state.ishiddentabbar!== true? {}: {paddingbottom:0}}
            >
                {/* Home *
                /} {This.rendertabbaritem ("home", ' home ', ' tabbar_home_30x30 ', ' Tabbar_home_selected_30x30 ', Home}}
                {/* Sea Amoy *}
                {this.rendertabbaritem ("Hai Tao", ' ht ', ' tabbar_abroad_30x30 ', ' Tabbar_abroad_selected_30x30 ', HT}}
                {/* hour Billboard *
                /} {This.rendertabbaritem ("hour leaderboard", ' hourlist ', ' Tabbar_ Rank_30x30 ', ' tabbar_rank_selected_30x30 ', hourlist)}
            </TabNavigator>

Here we bring in new knowledge--notice

The use of notifications is simple, and first you need to register for notifications and destroy them where appropriate

    Componentdidmount () {
        //Registration notification
        this.subscription = Deviceeventemitter.addlistener (' Ishiddentabbar ', (data) = >{this.tongzhi (data)});
    }

    Componentwillunmount () {
        //Destroy
        This.subscription.remove ();
    }

And then send a notification where we need it.

    Componentwillmount () {
        //Send notification
        deviceeventemitter.emit (' Ishiddentabbar ', true);
    }

    Componentwillunmount () {
        //Send notification
        deviceeventemitter.emit (' Ishiddentabbar ', false);
    }