Question

我将ListView中的参数传递给详细页面。我可以在详细页面上的渲染之外访问此参数：

以下是我传递参数的代码：

 <ListView

            dataSource={this.state.dataSource}
            renderRow = {( rowData ) =>
              <TouchableOpacity style = { styles.item } activeOpacity = { 0.4 } onPress = { this.clickedItemText.bind( this, rowData ) }>
                  <Text style = { styles.text }>{ rowData.ser }</Text>
              </TouchableOpacity>
          }

          renderSeparator = {() =>
            <View style = { styles.separator }/>
        }

        enableEmptySections = { true }

          />

        </View>

 clickedItemText( clickedItem )
    {
        this.props.navigation.navigate('Item', { item: clickedItem });
    }

我可以使用下面的代码在我的详细页面上获取参数值：

<View style = { styles.container2 }>
      <Text style = { styles.text }>You Selected: { this.props.navigation.state.params.item.Location.toUpperCase() }</Text>
      </View>

我需要这样做.props.navigation.state.params.item.Location ouside render。我想这样做的原因是因为我想在我的详细页面上创建一个ListView，方法是根据传递的参数过滤我的Json数据。如果传递的参数是2，那么我想基于2过滤我的JSON数据并创建另一个ListView。

据我所知，JSON数据的过滤只能在渲染之外完成。我可能是错的，我是新来的反应原生。

以下是我的全班详细页面。

import React, { Component } from 'react';

import { StyleSheet, Text, View, ListView, ActivityIndicator, TextInput } from 'react-native';

import ServiceDetails from '../reducers/ServiceDetails';


class ServiceListDetails extends Component
{

  constructor() {
    super();
    var newList = ServiceDetails.filter(obj => obj.fk === this.props.navigation.state.params.item.id);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(ServiceDetails),
    };
  }



  static navigationOptions =
  {
     title: 'SecondActivity',
  };




ListViewItemSeparator = () => {
  return (
    <View
      style={{
        height: .5,
        width: "100%",
        backgroundColor: "#000",
      }}
    />
  );
}


render()
  {



    return(
      <View style={styles.MainContainer}>
             <ListView

                dataSource={this.state.dataSource}
                renderSeparator= {this.ListViewItemSeparator}
                renderRow={(rowData) => <Text>{rowData.addr}</Text>}
/>

      </View>


    );

  }
}


const styles = StyleSheet.create(
    {
      MainContainer:
      {
         justifyContent: 'center',
         flex:1,
         margin: 10

      },

      TextStyle:
      {
         fontSize: 23,
         textAlign: 'center',
         color: '#000',
      },

      rowViewContainer: 
      {

        fontSize: 17,
        paddingRight: 10,
        paddingTop: 10,
        paddingBottom: 10,

      },

      ActivityIndicator_Style:
      {

        flex: 1, 
        alignItems: 'center', 
        justifyContent: 'center',
        left: 0, 
        right: 0, 
        top: 0, 
        bottom: 0,

      },

      TextInputStyleClass:{

        textAlign: 'center',
        height: 40,
        borderWidth: 1,
        borderColor: '#009688',
        borderRadius: 7 ,
        backgroundColor : "#FFFFFF"

        }

    });

    export default ServiceListDetails;

以下是我在详细页面上收到的错误的屏幕截图。

以下是我的母版页的整个代码，其上有一个列表视图，它可以正常工作：

import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, ActivityIndicator, TextInput, TouchableOpacity } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
import Icon from 'react-native-vector-icons/EvilIcons';
import ServiceDetail from './ServiceDetail';
import TestActivity from './TestActivity';

import { StackNavigator } from 'react-navigation';
import ServiceListDetails from './ServiceListDetails' ;




class AutoCompActivity extends Component {

  constructor(props) {

    super(props);

    this.state = {

      // Default Value of this State.
      Loading_Activity_Indicator: true,
      text:'',

    }
    this.arrayholder=[];
  }


  componentDidMount() {

    const data = require('../reducers/services.json')



        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          Loading_Activity_Indicator: false,
          dataSource: ds.cloneWithRows(data),
        }, function() {

          // In this block you can do something with new state.
          this.arrayholder = data ;
        });


  }


  SearchFilterFunction(text){

    const newData = this.arrayholder.filter(function(item){
        const itemData = item.ser.toUpperCase()
        const textData = text.toUpperCase()
        return itemData.indexOf(textData) > -1
    })
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newData),
        text: text
    })
}

ListViewItemSeparator = () => {
  return (
    <View
      style={{
        height: .5,
        width: "100%",
        backgroundColor: "#000",
      }}
    />
  );
}

/*Navigate_To_Second_Activity=(ser)=>
    {
      //Sending the JSON ListView Selected Item Value On Next Activity.
      this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: ser });

    }*/

    clickedItemText( clickedItem )
    {
        this.props.navigation.navigate('Item', { item: clickedItem });
    }


  static navigationOptions =
    {

     title: 'MainActivity',

    };
    render()
    {
      if (this.state.Loading_Activity_Indicator) {
        return (
          <View style={styles.ActivityIndicator_Style}>

            <ActivityIndicator size = "large" color="#009688"/>

          </View>
        );
      }

      return (

        <View style={styles.MainContainer}>

    <TextInput 
         style={styles.TextInputStyleClass}
         onChangeText={(text) => this.SearchFilterFunction(text)}
         value={this.state.text}
         underlineColorAndroid='transparent'
         placeholder="Search Here"
          />

       <ListView

            dataSource={this.state.dataSource}
            renderRow = {( rowData ) =>
              <TouchableOpacity style = { styles.item } activeOpacity = { 0.4 } onPress = { this.clickedItemText.bind( this, rowData ) }>
                  <Text style = { styles.text }>{ rowData.ser }</Text>
              </TouchableOpacity>
          }

          renderSeparator = {() =>
            <View style = { styles.separator }/>
        }

        enableEmptySections = { true }

          />

        </View>
      );
    }



}

export default MyNewProject=   StackNavigator(
{
  First:   {screen: AutoCompActivity},
  Item: {screen: ServiceListDetails}

}


);

const styles = StyleSheet.create(
  {
    MainContainer:
    {
       justifyContent: 'center',
       flex:1,
       margin: 10

    },

    TextStyle:
    {
       fontSize: 23,
       textAlign: 'center',
       color: '#000',
    },

    rowViewContainer: 
    {

      fontSize: 17,
      paddingRight: 10,
      paddingTop: 10,
      paddingBottom: 10,

    },

    ActivityIndicator_Style:
    {

      flex: 1, 
      alignItems: 'center', 
      justifyContent: 'center',
      left: 0, 
      right: 0, 
      top: 0, 
      bottom: 0,

    },

    TextInputStyleClass:{

      textAlign: 'center',
      height: 40,
      borderWidth: 1,
      borderColor: '#009688',
      borderRadius: 7 ,
      backgroundColor : "#FFFFFF"

      },


    separator:
    {
        height: 2,
        backgroundColor: 'rgba(0,0,0,0.5)'
    },
    item:
    {
        padding: 15
    },

    text:
    {
        fontSize: 18
    },

  });

My services.json is below

[

{
    "id":0,
    "ser": "Test Service",
    "Location": "TestLoc",
    "Phone1":"(999)-999-5050",
    "SecondLoc": "TestLoc2",
    "email":"test@test.com",
    "sourceLat":"33.977806",
    "sourceLong":"-117.373261",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Address, Test Drive",
    "destAddr2": "Test Address2, Test Drive2",
    "onlineURL":"",
    "Phone2": "(900)-900-3333"
  }

]

我的ServiceDetails.json如下：

   [ 
    {
       "id":"1",
       "fk": "0",
       "addr": "2Test addr",
       "phone": "(951)-955-6200",
       "LatL":"33.935547",
       "Long2":"-117.191",
       "Online": ""
    },

    {
        "id":"2",
        "fk": "0",
        "addr": "testaddr21",
        "phone": "(999)-999-9999",
        "LatL":"33.977880",
        "Long2":"-117.1234",
        "Online": ""
     }
]

我怎样才能做到这一点？

访问this.props.navigation.state.params ouside渲染

0 个答案: