Introduction to React-native Introductory basics

Directory

• Installation
• Project
  • Main directory structure
  • Entrance
    • Home module
    • Coobook Module
    • List module
    • Novel module
• Related references

A simple demo, for the introduction of react-native related basic information, mainly for interested students reference; The following content and code are valid for 2018-08 tests.

Complete Project code: https://github.com/NameHewei/react-native

Installation

1. NPM install-g Create-react-native-app
2. Create-react-native-app You-app-name
3. CD You-app-name
4. NPM start
5. Download Expo app:https://expo.io/(may want to register) to install on the phone
6. QR code to be displayed after scanning NPM start

For the project to be smooth, please prepare the ladder!

Here is to preview your react-native project by installing the Expo on the phone and then using the QR code generated by the Expo scan to start the project, provided that the IP of the PC is in the same network segment as the IP of the phone. After the expo has packaged your project, each PC-side ctrl+s will automatically update the expo content. This article does not describe the way to install the simulator, please Google for yourself.

Project Main directory structure

|—— app.js
|—— view
  |—— Home.js
    |—— cookbook
        |—— Cookbook.js
        |—— Detail.js
        |—— List.js
    |—— novel
        |—— Novel.js

All of the following are related to component properties, please refer to the article last website link for viewing, this article only describes the key attributes.

Routing Component usage: react-native

UI components using: Native-base

Entrance

export default createDrawerNavigator({
    home: {
        screen: Home
    },
    novel: {
        screen: Novel
    },
    cookbook: {
        screen: Cookbook
    },
}, {
    drawerBackgroundColor: ‘#ffffff‘,
    contentOptions: {
        activeTintColor: ‘#e91e63‘,
    }
});

The home page uses the Createdrawernavigator routing component, which displays the first attribute value of the route to the object by default.

Home module

export default class Home extends Component {
    static navigationOptions = {
        drawerLabel: ‘Home‘,
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require(‘./../public/img/menu.png‘)}
                style={[styles.icon, { tintColor: tintColor }]}
            />
        ),
    };

    render() {
        return (    
            <View
                style={{ flex: 1, marginTop: 20 }}
            >
                <View
                    style={{ flex: 1, alignItems:‘center‘, justifyContent: ‘center‘ }}
                >
                    <TouchableHighlight 
                        underlayColor={ ‘#fff‘ }
                        activeOpacity={ 1 }
                        onPress={ () => this.props.navigation.openDrawer() }>
                        <Image
                            style={{ height: 220, width: 220, borderRadius: 110 }}
                            source={require(‘./../public/img/avatar.jpg‘)}
                        />
                     </TouchableHighlight>
                </View>
            </View>
        );
    }
}

This page is mainly the first screen display content, according to the page code note the following three points:

1. Image link to use Touchablehighlight
2. Use the Navigation.opendrawer () method to turn the slide
3. The image address should be introduced using the Require (URL) method

Coobook Module

const navigationConfig = {
    header: null
}

export default App = createStackNavigator({
    List: {
        screen: List,
        path: ‘list/:id‘,
        navigationOptions: (navigation) => (navigationConfig)
    },
    Detail: { 
        screen: Detail,
        navigationOptions: (navigation) => ({
            title: ‘详情‘
        })
    },
})

Cook module function is to provide a list page, click on the list item to enter the details page, note the following three points:

1. Implemented with the Createstacknavigator routing component.
2. The List page does not need a header at the top, so it is set to null (see document for details)
3. Because the details page needs an ID here, you can use List/:id to pass the argument

List module

export default class ListComponent extends Component {
    render() {
        return (    
            <View
                style={{ flex: 1, paddingTop: 20 }}
            >
                <Container>
                    <Content>
                        <List>
                            <ListItem avatar onPress={() => {
                                this.props.navigation.navigate(‘Detail‘, {
                                    id: 0
                                })
                            }}>
                                <Left>
                                    <Thumbnail source={{ uri: ‘http://xx.jpg‘ }} />
                                </Left>
                                <Body>
                                    <Text>回锅肉</Text>
                                    <Text note>一道好吃到板的菜</Text>
                                </Body>
                                <Right>
                                    <Text note>2018-08-21</Text>
                                </Right>
                            </ListItem>
                    </List>
                    </Content>
                </Container>

            </View>

        );
    }
}

The component uses the Native-base UI component

Note the following four points:

1. Note that a component can only be supplied with a style property that is available only.
2. The top menu bar is 20 high, all the width and height do not need to add units, will be automatically converted to device units
3. Text must be wrapped in text
4. Routing jumps are implemented by Navigation.navigate (' name ', params)

Novel module

Export default createBottomTabNavigator({
     Home: {
         Screen: HomeScreen,
         navigationOptions: () => ({
             tabBarVisible : true,
             Title: ‘Ant Country’,
             headerBackTitle: null
         }),
     },
     Settings: {
         Screen: SettingsScreen,
         navigationOptions: () => ({
             tabBarVisible : true,
             Title: ‘The strongest god-level soldier’,
             headerBackTitle: null
             }),
     },
     }, {
         headerMode: ‘screen‘,
     }); 

The module uses a menu button at the bottom to view different novels, so the new routing method is used:

1. Switch screen with Createbottomtabnavigator
2. The content of the page needs to be slid, scrollview components must be wrapped

Related references

• RN Official website: https://facebook.github.io/react-native/
• React Navigation official website: https://reactnavigation.org/
• Nativebase components: https://nativebase.io/

If you have any questions or errors, please correct me, thank you! Github Blog Issues

Introduction to React-native Introductory basics