RN常用

常用依赖
import { createBottomTabNavigator } from “react-navigation”;
import Ionicons from “react-native-vector-icons/Ionicons”;
import React, { Component } from “react”;
import { Text, View, TouchableHighlight, Image } from “react-native”;
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;
import { TabNavigator, StackNavigator } from “react-navigation”;

    TabNavigator底部TAB栏

    createBottomTabNavigator底部Tab栏

    flex: 1,                   占比权重
    flexDirection: "row",      方向
    flexWrap: "wrap",          是否换行
    justifyContent: "center"   主轴对齐
    alignItems: "center",      交叉轴对齐
    alignSelf: "center",       自己如何对齐
    backgroundColor: "red",    背景

    width: 50,                 宽
    height: 50,                高
    resizeMode: Image.resizeMode.contain,     图片自适应
    margin: 10,                外边距

    textAlign: "center",       文本居中
    borderRadius: 15,          圆角度
    borderColor: "#466467",    圆角边框颜色
    borderWidth: 2,            圆角边框线宽度
    padding: 10,               内边距
    fontSize: 18,              文本字体大小
    margin: 15,                外边距
    color: "#ffffff",          文本字体颜色



    marginTop: 25,往下

    resizeMode: Image.resizeMode.contain,图片设置

    borderRadius: 100圆角图片

    screen

    navigationOptions

2.RN的网络请求
APP文件配置
/**
1.这相当于RN在运行的时候会走context文件 下的MainActivity

mport React, { Component } from “react”;
import { Platform, StyleSheet, Text, View } from “react-native”;
import MainActivity from “./context/MainActivity”;

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

}
2.实现网络请求功能Tab栏加页面的切换
import { createBottomTabNavigator } from “react-navigation”;
import Ionicons from “react-native-vector-icons/Ionicons”;
import React, { Component } from “react”;
import { Text, View, TouchableHighlight, Image } from “react-native”;
import HtmlActivity from “./HtnlActivity”;
import { TabNavigator, StackNavigator } from “react-navigation”;
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;

class Layoutltem extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<Text style={{ fontSize: 25 }}>{this.props.title}
<Image
style={{
height: 60,
width: 60,
resizeMode: Image.resizeMode.contain
}}
source={{ uri: this.props.avatar_url }}
/>
<Text style={{ fontSize: 25 }}>{this.props.create_at}

);
}
}

class You1 extends Component {
constructor(props) {
super(props);
this.state = {
dataValue: [],
refreshState: RefreshState.Idle
};
}
componentDidMount() {
this.onHeaderRefresh();
}
onNetWork = () => {
fetch(“https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10”)
.then(response => response.json())
.then(responseJson => {
this.setState({
dataValue: […this.state.dataValue, …responseJson.data],
refreshState: RefreshState.Idle
});
})
.then(error => console.info(error));
};
onHeaderRefresh = () => {
this.setState({
dataValue: [],
refreshState: RefreshState.HeaderRefreshing
});
this.onNetWork();
};
onFooterRefresh = () => {
this.setState({ refreshState: RefreshState.FooterRefreshing });
this.onNetWork();
};
WebUrl = item => {};
render() {
return (
<View style={{ flex: 1 }}>
<RefreshListView
data={this.state.dataValue}
renderItem={({ item }) => (
<TouchableHighlight
onPress={() => {
this.props.navigation.navigate(“Html”, {
url: item.content
});
}}
>

)}
// 特有方法
refreshState={this.state.refreshState}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
// 可选
footerRefreshingText=“玩命加载中 >.<”
footerFailureText=“我擦嘞，居然失败了 =.=!”
footerNoMoreDataText="-我是有底线的-"
footerEmptyDataText="-好像什么东西都没有-"
/>

);
}
}
class You2 extends Component {
constructor(props) {
super(props);
this.state = {
dataValue: [],
refreshState: RefreshState.Idle
};
}
componentDidMount() {
this.onHeaderRefresh();
}
onNetWork = () => {
fetch(“https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10”)
.then(response => response.json())
.then(responseJson => {
this.setState({
dataValue: […this.state.dataValue, …responseJson.data]
});
})
.then(error => console.info(error));
};
onHeaderRefresh = () => {
this.setState({
dataValue: [],
refreshState: RefreshState.HeaderRefreshing
});
this.onNetWork();
};
onFooterRefresh = () => {
this.setState({ refreshState: RefreshState.FooterRefreshing });
this.onNetWork();
};
WebUrl = item => {};
render() {
return (
<View style={{ flex: 1 }}>
<RefreshListView
data={this.state.dataValue}
renderItem={({ item }) => (
<TouchableHighlight
onPress={() => {
this.props.navigation.navigate(“Html”, {
url: item.content
});
}}
>

)}
// 特有方法
refreshState={this.state.refreshState}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
// 可选
footerRefreshingText=“玩命加载中 >.<”
footerFailureText=“我擦嘞，居然失败了 =.=!”
footerNoMoreDataText="-我是有底线的-"
footerEmptyDataText="-好像什么东西都没有-"
/>

);
}
}

const MainActivity = createBottomTabNavigator(
{
New1: {
screen: You1,
navigationOptions: {
title: “帖子”
}
},
New2: {
screen: You2,
navigationOptions: {
title: “我的”
}
}
},
{
tabBarOptions: {
activeTintColor: “#FFFFFF”,
inactiveTintColor: “#2296F3”,

    activeBackgroundColor: "#2296F3",
    inactiveBackgroundColor: "#FFFFFF"
    },
    navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === "Gone") {
    iconName = "ios-document";
    } else if (routeName === "You") {
    iconName = "ios-create";
    } else if (routeName === "Gonete") {
    iconName = "ios-person";
    }
    return <Ionicons name={iconName} size={25} color={tintColor} />;
    }
    })
    }
    );
    const Acticity = StackNavigator({
    Main: {
    screen: MainActivity,
    navigationOptions: {
    header: null
    }
    },
    Html: {
    screen: HtmlActivity,
    navigationOptions: {
    title: "详情"
    }
    }
    });
    export default Acticity;

3.还有一个点击跳转详情的页面

import React, { Component } from “react”;
import { View, Text, StyleSheet, WebView, ScrollView } from “react-native”;
import HTML from “react-native-render-html”;

class HtmlActivity extends Component {
render() {
return (

<HTML html={this.props.navigation.getParam(“url”)} />

);
}
}
export default HtmlActivity;

好了接下来就可以实现网络请求数据功能

猜你喜欢