ReactNative FlatList 及 react-nav

前言

FaltList是ReactNative中使用频率比较高的组件，react-navigation是官方主推的导航库，最近稍微写了一些例子，在此做一下记录及分享。

FlatList的使用

官方有给出具体的代码，这里主要贴下我自己写的代码
渲染组件

<View style={styles.container}>

                <FlatList
                    data = {this.state.movies}
                    renderItem = {this.renderItem.bind(this)}
                    keyExtractor = {(item) => item.id}
                    ItemSeparatorComponent = {this.renderLineView}
                    refreshing = {this.state.refreshing}
                    onRefresh = {this.handRefresh.bind(this)}
                    /* 加载下一页
                    onEndReachedThreshold={0.5}
                    onEndReached={this.handRefresh.bind(this)}
                    */
                />

            </View>

渲染item

renderItem = (item) => {

        return(
            <TouchableOpacity style={styles.items} onPress={this.jumpToDetail.bind(this, item.item.title)}>
                <View style={styles.center}>
                    <Text style={styles.font}>{item.item.title}</Text>
                </View>
            </TouchableOpacity>
        );

    }

网络请求

loadList() {

        let url = 'https://api.douban.com/v2/movie/coming_soon?city=北京';

        fetch(url)
            .then(response => response.json())
            .then(responseData => {

                console.log('>>>>the data is'+responseData.subjects);

                let moviesData = [];

                for(let i in responseData.subjects) {
                    let movieItem = responseData.subjects[i];
                    console.log('the title is'+movieItem.title);
                    moviesData.push(movieItem);
                }

                console.log('>>>>the movies is'+moviesData)

                this.setState({
                    movies: moviesData,
                    refreshing: false,
                });

            }).catch(error => {
            console.error('>>>the error is'+error);
        });

    }

下拉刷新

handRefresh = () => {
        this.setState({
            refreshing: true,
            movies: [],
        }, () => {
            this.loadList();
        });
    }

基本使用的话只需要实现data和renderItem相关方法即可，至于其他属性及方法官方文档都有说明，我这里实现了下拉刷新以及分割线等方法，数据也是从API获取的。不过个人感觉官方的下拉刷新有点别扭，我Demo里有写了第三方的下拉刷新的页面，如果感兴趣可以下载看看。

react-navigatin 使用

react-navigation 官方也有很多示例代码和说明，我这里算是稍微组合了一下。
设置navigation及tabBar

export default class RootTabs extends Component {
    render() {
        return(
            <Tabs/>
        )
    }
}


const HomeStack = createStackNavigator(
    {
        Home: HomeScreen,
        Detail: DetailsScreen,
    },
    {
        initialRouteName: 'Home',
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    }
);

HomeStack.navigationOptions = ({ navigation }) => {
    return {
        tabBarVisible: navigation.state.index === 0,
    };
};


const SettingStack = createStackNavigator(
    {
        Setting: {
            screen: SettingScreen,
            navigationOptions: {
                headerStyle: {
                    backgroundColor: '#f4511e',
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
            },
        },
        Detail: {
            screen: DetailsScreen,
            navigationOptions: {
                headerStyle: {
                    backgroundColor: '#f4511e',
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
            },
        },

        Refresh: {
            screen: RefreshListScreen,
            navigationOptions: {
                headerStyle: {
                    backgroundColor: '#f4511e',
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
            },
        },
    },
);


const Tabs = createBottomTabNavigator(
    {
        Home: {
            screen: HomeStack,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: 'Home',
                tabBarIcon: ({focused, tintColor}) => (
                    <TabBarItemComponent
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('../image/home_normal.png')}
                        selectedImage={require('../image/home_select.png')}
                    />
                )
            }),
        },
        Setting: {
            screen: SettingStack,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: 'Setting',
                tabBarIcon: ({focused, tintColor}) => (
                    <TabBarItemComponent
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('../image/setting_normal.png')}
                        selectedImage={require('../image/setting_select.png')}
                    />
                )
            }),
        },
    },


    {
        tabBarOptions: {
            activeTintColor: 'blue',
            inactiveTintColor: 'gray',
            labelStyle: {
                fontSize: 15,
            },

        },
    }


);

然后在APP.js里使用即可

export default class App extends Component {
    render() {
        return(
            <RootTabs/>
        )
    }
}

最后是效果图

list.png
detail.png
setting.png

总结

以上就是我对FlatList及react-navigation的一些使用示例，这里是Demo, 下载后cd到项目目录npm install即可。写的不好，请大家多多批评指正。