Question

我正在创建反应原生应用程序，在它的第一页（主页）上它将显示一些博客供稿的内容，点击阅读更多它将在下一页显示该博客供稿的详细视图。所以，我的问题是如何做到这一点？这是我的输出： Output Image

所以在点击“阅读更多”按钮时，它应该只打开该博客提要的详细视图，我的问题是如何在本机做反应？

这是我的代码：

import React, { Component } from 'react';
import {
  ActivityIndicator,
  ListView,
  Text,
  StyleSheet,
  View,
  TouchableOpacity
} from 'react-native';
import {Actions, Router, Scene} from 'react-native-router-flux';
import TimeAgo from 'react-native-timeago';
import {
  Card,
  CardItem,
  Content,
  Header,
  Body,
  Footer,
  FooterTab,
  Container,
  Left,
  Icon,
  Right
} from 'native-base';

import {GetImage,ContentSnippet} from './helpers/helpers';
import HTMLView from 'react-native-htmlview';
import FitImage from 'react-native-fit-image';
export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }

  componentDidMount()       {
          return fetch('http://www.cardory.co.uk/jan/json')
            .then((response) => response.json())
            .then((responseJson) => {
              let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==             
 r2});
    this.setState({
      isLoading: false,
      dataSource: ds.cloneWithRows(responseJson.items),
    }, function() {
      // do something with new state
    });
  })
  .catch((error) => {
    console.error(error);
  });
    }

    render() {
      if (this.state.isLoading) {
        return (
          <View style={{flex: 1, paddingTop: 80}}>
            <ActivityIndicator />
          </View>
        );
      }

return (
  <Container style={{flex: 1, paddingTop: 60}} >
  <ListView
    dataSource={this.state.dataSource}
    renderRow={(rowData) =>

      <Card>
        <CardItem header>
          <Text style={styles.titleHeading}>{rowData.title}</Text>
        </CardItem>
        <CardItem cardBody>
            <Content style={{marginLeft:10,marginRight:10}}>
              <FitImage source={{uri: GetImage(rowData.content_html)}}/>
              <HTMLView value={ContentSnippet(rowData.content_html.replace(/<img[^>]*>/g,""))}/>
            </Content>
        </CardItem>
        <CardItem>
            <Left>
              <TouchableOpacity onPress={Actions.details}>
                <Text>
                  Read more
                </Text>
              </TouchableOpacity>
            </Left>
            <Right>
              <Text>
                <Icon name="time"/>
                <TimeAgo time=  {rowData.date_published}/>
              </Text>
            </Right>
        </CardItem>
      </Card>
    }
  />
  </Container>
);
    }
  }
  const styles=StyleSheet.create({
    textHeading:{
      fontSize:20,
      marginTop:20
    },
    titleHeading:{
      fontSize:20,
      fontWeight:'bold',
      color:'black',
      alignItems:'center',
    }
  });
  module.export=Home;

Answer 1

您应该使用导航库，例如。 react-navigation

import { StackNavigator } from 'react-navigation'

class Home extends Component {
  // your code
  // ...
    <TouchableOpacity onPress={() => this.props.navigation.navigate('Detail', { rowData })}>
  // ...
}

class Detail extends Component {
  // detail view logic
  // the rowData will be available at this.props.navigation.state.params.rowData
}

const App = StackNavigator({
  Home: { screen: Home },
  Detail: { screen: Detail },
})

export default App

编辑：我刚刚意识到你已经在使用导航库（react-native-router-flux）。我认为反应导航更容易入手。

响应原生博客供稿视图

1 个答案: