ReactNative-简易个人博客客户端

发表于   |   分类于   |     |   阅读次数   |   阅读时长 5 分钟

记录了学习React Native过程中一开始的上手项目， 对初学者提供对比参考。Github Source

Demo

Dependency

react native components:

  • TabBarIOS
  • Navigator
  • WebView

third library:

  • react-native-vector-icons

Trouble Shooting

Sometimes the third-party libraries not fully integrated into the project even doing rnpm link. In such case, delete the node_modules folder and install again, rm -rf node_modules && npm install, then do rnpm link to help link with IOS libraries instead of doing it mannually.

How to center an image of fixed size

Apply flex: 1, justifyContent: 'center', alignItems: 'center' styling on image’s parent element, then for that image’s styling, only specify its fixed height and width will work!

TouchableHighlight

TouchableHighlight component can only has one child element, thus if we want to have multiple children elements, wrap them into a single view container.

Notice one error I met, we need to directly use a View component after TouchableHighlight.

Finally using Navigator instead of NavigatorIOS, there are several important things to remember:

  • we have an renderScene method in index.ios.js that defines what component to render when there is an scene being pushed.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // In parent component, we define renderScene method:
    renderScene(route, navigator) {
       if(route.name == 'Main') {
         return <Main navigator={navigator} {...route.passProps} />
       }
       if(route.name == 'Home') {
         return <Home navigator={navigator} {...route.passProps} />
       }
    },

    // And in child component, we put all data we want to pass to next scene in route object.
    _navigate(property){
      this.props.navigator.push({
        name: 'Home',
        passProps: {
          name: property
        }
      })
    }

    <TouchableHighlight onPress={ () => this._navigate('Hello World') }>
        <Text>GO To View</Text>
    </TouchableHighlight>

And utilizing the spread syntax of passing properties, we can easily allow next scene to use the data passed from the previous scene, the one being trigger(ususally by pressing).

  • The problem of “this”. In the above example, we use the ES6 arrow syntax, which automatically bind “this” for us, which means that the “this” inside the function we called points to the current component. However, if we use common function assignment like onPress={this.onPress.bind(this)}, we have to manually bind this to it!!!

check this post for more information. And refer to the source code of example navigator example.

TabBarIOS

Check this post for more helpful information.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
render() {
    return (
      <TabBarIOS selectedTab={this.state.selectedTab}>
        <TabBarIOS.Item
          selected={this.state.selectedTab === 'welcome'}
          systemIcon="featured"
          onPress={() => {
              this.setState({
                  selectedTab: 'welcome',
              });
          }}>
            <Welcome/>
        </TabBarIOS.Item>
        <TabBarIOS.Item
          selected={this.state.selectedTab === 'more'}
          systemIcon="featured"
          onPress={() => {
                this.setState({
                    selectedTab: 'more',
                });
          }}>
          <More/>
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }

Test on real device

Image not rendering from ListView

  • One weird thing happened is that using the same uri from Day2 project, I want to render luffy on each row of ListView, but it doesn’t show up. Then, I change to a small and https-sourced image from facebook’s github repo, then it works. Not sure how to deal with it yet.
  • Some one from issue panel says that image may not be updated in ListView and you have to add an “ID” attribute to forcely update it, it can be saved for later’s use.

Icon

Most used library for Icon is “react-native-vector-icons”, and simply import corresponding libraries will do the tricks, import Icon from 'react-native-vector-icons/Ionicons'; Then, use this website for searching new icons. If animation required, use react-native-animatable to animate. icons.

Nativebase

It’s a surprise for me! Just like the bootstrap for html, nativebase gives so much template to build react native front-end. Check this tutorial for more examples.

Webview render HTML

Use react-native-htmlview to render HTML-like text, which usually contains HTML tags like <p> and </br> and so on. In order to directly jump to the original web page, we simple use react-native-webview library.

Data

Grab data from RSS

Here is a handy website that transforms rss feed into json, and provides a API for that: http://rss2json.com/. For example, my blog’s rss feed being transformed to json is: http://rss2json.com/api.json?rss_url=http%3A%2F%2Fchocoluffy.com%2Fatom.xml. Then using this json file, we can have a much more consistent and clear structure to formatize into RN app.

一起加油！