React Native （下）（底部导航（可点击）,点击子条目跳转详情界面）

最新推荐文章于 2021-09-26 15:59:11 发布

寻你的轮廓

最新推荐文章于 2021-09-26 15:59:11 发布

阅读量222

点赞数

本文链接：https://blog.csdn.net/qq_43225164/article/details/82746276

版权

//Bottom底部导航
import React from "react";
import { createBottomTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import Publish from "../pages/Publish";
import My from "../pages/My";
import TopNav from "./TopNav";

const Bottom = createBottomTabNavigator(
  {
    TopNav: {
      screen: TopNav,
      navigationOptions: {
        title: "帖子"
      }
    },
    Publish: {
      screen: Publish,
      navigationOptions: {
        title: "发布"
      }
    },
    My: {
      screen: My,
      navigationOptions: {
        title: "我的"
      }
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "TopNav") {
          //切换不同的图标
          iconName = `ios-document${focused ? "" : "-outline"}`;
        } else if (routeName === "Publish") {
          iconName = `ios-create${focused ? "" : "-outline"}`;
        } else if (routeName === "My") {
          iconName = `ios-person${focused ? "" : "-outline"}`;
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    })
  }
);

export default Bottom;


//AppNav实现 顶部导航或者底部导航
import { createStackNavigator } from "react-navigation";
import Detail from "../pages/Detail";
import Bottom from "./Bottom";
import TopNav from "./TopNav";

const AppNav = createStackNavigator({
  Bottom: {
    screen: Bottom,
    navigationOptions: {
      header: null
    }
  },
  Detail: Detail
});

export default AppNav;


//Detail 获取详情页面
import React, { Component } from "react";
import {
  ScrollView,
  StyleSheet,
  Dimensions,
  ActivityIndicator
} from "react-native";
import HTML from "react-native-render-html"; //渲染html成原生内容
import { getData } from "../comm/fetch";

export default class Detail extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam("title") //动态获取标题栏
    };
  };
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
      content: "" //页面内容
    };
  }
  requestData = async () => {
    try {
      let url = "/topic/" + this.props.navigation.getParam("id"); //拼接字符串
      let data = await getData(url);
      data = data.data;
      this.setState({
        content: data.content,
        loaded: true
      });
    } catch (err) {
      //错误提示
      console.error(err);
    }
  };
  componentDidMount() {
    this.requestData();
  }
  render() {
    return (
      <ScrollView style={styles.container}>
        {this.state.loaded ? (
          <HTML
            html={this.state.content}
            imagesMaxWidth={Dimensions.get("window").width - 20}
          />
        ) : (
          <ActivityIndicator />
        )}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10
  }
});

//Publish  底部导航组件 发布
import React, { Component } from "react";
import { Text } from "react-native";

export default class Publish extends Component {
  render() {
    return <Text>发布</Text>;
  }
}


//My 底部导航组件 我的
import React, { Component } from "react";
import { Text } from "react-native";

export default class My extends Component {
  render() {
    return <Text>我的</Text>;
  }
}

//Home主页
import React, { Component } from "react";
import AppNav from "../components/AppNav";

export default class Home extends Component {
  render() {
    return <AppNav />;
  }
}

寻你的轮廓

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React Native （下）（底部导航（可点击）,点击子条目跳转详情界面）

//Bottom底部导航import React from "react";import { createBottomTabNavigator } from "react-navigation";import Ionicons from "react-native-vector-icons/Ionicons";import Publish from "../pages/Publish";...
复制链接

扫一扫