详情页面加导航及滑动界面

最新推荐文章于 2021-05-30 03:11:22 发布

qq_42981847

最新推荐文章于 2021-05-30 03:11:22 发布

阅读量173

点赞数 1

本文链接：https://blog.csdn.net/qq_42981847/article/details/82727902

版权

import React, { Component } from "react";
import {
  Text,
  StyleSheet,
  View,
  ScrollView,
  Dimensions,
  ActivityIndicator
} from "react-native";
import { getData } from "../comm/feach";
import HTML from "react-native-render-html";

export default class Detail extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam("title")
    };
  };
  constructor(props) {
    super(props);
    this.state = {
      content: "",
      id: ""
    };
  }
  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,
        id: data.id
      });
    } catch (error) {
      console.error(error);
    }
  };
  componentDidMount() {
    this.requestData();
  }
  render() {
    return (
      <ScrollView style={style.container}>
        {this.state.loaded ? (
          <View>
            <View style={style.padding}>
              <HTML
                html={this.state.content}
                imagesMaxWidth={Dimensions.get("window").width - 20}
              />
            </View>
          </View>
        ) : (
          <ActivityIndicator />
        )}
      </ScrollView>
    );
  }
}
const style = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10
  },
  padding: {
    padding: 10
  }
});

import { createStackNavigator } from "react-navigation";
import TopNav from "../components/TopNav";
import Detail from "../pages/Detail";

const Shouye = createStackNavigator({
  TopNav: {
    screen: TopNav,
    navigationOptions: {
      header: null
    }
  },
  Detail: Detail
});
export default Shouye;

import React from "react";
import { createTabNavigator } from "react-navigation";
import List from "./List";
// import Good from "./Shouye";
// import Share from "./Share";
// import Ask from "./Ask";
// import Job from "./Job";
const Good = () => {
  return <List tab="good" />;
};
const Share = () => {
  return <List tab="share" />;
};
const Ask = () => {
  return <List tab="ask" />;
};
const Job = () => {
  return <List tab="job" />;
};
const TopNav = createTabNavigator(
  {
    Good: {
      screen: Good,
      navigationOptions: {
        title: "精华"
      }
    },
    Shart: {
      screen: Share,
      navigationOptions: {
        title: "分享"
      }
    },
    Ask: {
      screen: Ask,
      navigationOptions: {
        title: "问答"
      }
    },
    Job: {
      screen: Job,
      navigationOptions: {
        title: "工作"
      }
    }
  },
  {
    lazy: true, 
    tabBarPosition: "bottom",
    swipeEnabled: true,
    animationEnabled: true 
  }
);
export default TopNav;

qq_42981847

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详情页面加导航及滑动界面

import React, { Component } from “react”; import { Text, StyleSheet, View, ScrollView, Dimensions, ActivityIndicator } from “react-native”; import { getData } from “../comm/feach”...
复制链接

扫一扫