2016-07-29 127 views
5

我想學習如何使用反應本地的,所以我把一個小的應用程序從服務器獲取用戶的列表,其顯示在listview和按某一行打開顯示用戶數據的屏幕。陣營母語 - 從一個屏幕傳遞到另一個數據

我成立了一個導航去從一個屏幕到另一個。當按下這一行時,我可以打開一個新的屏幕,但我不知道如何將數據傳遞到這個新屏幕。

我建立一個導航器在index.android.js

import React from 'react'; 
import { 
    AppRegistry, 
    Navigator, 
} from 'react-native'; 

import ContactList from './src/containers/ContactList.js'; 

function MyIndex() { 
    return (
    <Navigator 
     initialRoute={{ name: 'index', component: ContactList }} 
     renderScene={(route, navigator) => { 
     if (route.component) { 
      return React.createElement(route.component, { navigator }); 
     } 

     return undefined; 
     }} 
    /> 
); 
} 

AppRegistry.registerComponent('reactest',() => MyIndex); 

首先我顯示一個屏幕,按鈕和空列表視圖(ContactList.js),按下按鈕後,我取了用於一些JSON數據更新listview

import React, { Component, PropTypes } from 'react'; 
import { 
    Text, 
    View, 
    TouchableOpacity, 
    TouchableHighlight, 
    ListView, 
    Image, 
} from 'react-native'; 

import styles from '../../styles'; 
import ContactDetails from './ContactDetails'; 

const url = 'http://api.randomuser.me/?results=15&seed=azer'; 

export default class ContactList extends Component { 
    static propTypes = { 
    navigator: PropTypes.object.isRequired, 
    } 
    constructor(props) { 
    super(props); 

    const datasource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
    this.state = { 
     jsonData: datasource.cloneWithRows([]), 
     ds: datasource, 
    }; 
    } 
    _handlePress() { 
    return fetch(url) 
     // convert to json 
     .then((response) => response.json()) 
     // do some string manipulation on json 
     .then(({ results }) => { 
     const newResults = results.map((user) => { 
      const newUser = { 
      ...user, 
      name: { 
       title: `${user.name.title.charAt(0).toUpperCase()}${user.name.title.slice(1)}`, 
       first: `${user.name.first.charAt(0).toUpperCase()}${user.name.first.slice(1)}`, 
       last: `${user.name.last.charAt(0).toUpperCase()}${user.name.last.slice(1)}`, 
      }, 
      }; 

      return newUser; 
     }); 

     return newResults; 
     }) 
     // set state 
     .then((results) => { 
     this.setState({ 
      jsonData: this.state.ds.cloneWithRows(results), 
     }); 
     }); 
    } 
    renderRow(rowData: string) { 
    return (
     <TouchableHighlight 
     onPress={() => { 
      this.props.navigator.push({ 
      component: ContactDetails, 
      }); 
     }} 
     > 
     <View style={styles.listview_row}> 
      <Image 
      source={{ uri: rowData.picture.thumbnail }} 
      style={{ height: 48, width: 48 }} 
      /> 
      <Text> 
      {rowData.name.title} {rowData.name.first} {rowData.name.last} 
      </Text> 
     </View> 
     </TouchableHighlight> 
    ); 
    } 
    render() { 
    const view = (
     <View style={styles.container}> 
     <TouchableOpacity 
      onPress={() => this._handlePress()} 
      style={styles.button} 
     > 
      <Text>Fetch results?</Text> 
     </TouchableOpacity> 
     <ListView 
      enableEmptySections 
      dataSource={this.state.jsonData} 
      renderRow={(rowData) => this.renderRow(rowData)} 
      onPress={() => this._handleRowClick()} 
     /> 
     </View> 
    ); 

    return view; 
    } 
} 

當按下一排,它會打開一個新的屏幕ContactDetails.js,這是爲了顯示用戶的數據:

import React, { 
} from 'react'; 

import { 
    Text, 
    View, 
} from 'react-native'; 

import styles from '../../styles'; 

export default function ContactDetails() { 
    return (
    <View style={styles.container}> 
     <Text>{this.props.title}</Text> 
     <Text>{this.props.first}</Text> 
     <Text>{this.props.last}</Text> 
    </View> 
); 
} 

在這一點上,我得到這個錯誤:

不確定是不是一個對象(評估 'this.props.title')

我已經嘗試了許多東西,如:

this.props.navigator.push({ 
    component: ContactDetails, 
    title: rowData.name.title, 
    first: rowData.name.first, 
    last: rowData.name.last, 
}); 

this.props.navigator.push({ 
    component: ContactDetails, 
    props: { 
     title: rowData.name.title, 
     first: rowData.name.first, 
     last: rowData.name.last, 
    } 
}); 

this.props.navigator.push({ 
    component: ContactDetails, 
    passProps: { 
     title: rowData.name.title, 
     first: rowData.name.first, 
     last: rowData.name.last, 
    } 
}); 

,但無濟於事。

我也看了,我應該使用終極版。難道我做錯了什麼 ?

編輯:的問題是在這裏:

<TouchableHighlight 
    onPress={() => { 
     this.props.navigator.push({ 
     component: ContactDetails, 
     }); 
    }} 
> 

我想我應該通過一些參數出現,但無論我嘗試了上述故障。

回答

5

所以,問題似乎在於這裏:

<Navigator 
    initialRoute={{ name: 'index', component: ContactList }} 
    renderScene={(route, navigator) => { 
    if (route.component) { 
     return React.createElement(route.component, { navigator }); 
    } 

    return undefined; 
    }} 
/> 

在renderScene功能,您收到的路由(並使用route.component),但你不要傳遞你的route.props或route.passProps或你想要的任何東西!從那時我在Navigator的源代碼中看到,您應該在創建它時擁有完整的路由對象。所以你應該能夠通過你的道具。

例如:

<Navigator 
    initialRoute={{ name: 'index', component: ContactList }} 
    renderScene={(route, navigator) => { 
    if (route.component) { 
     return React.createElement(route.component, { navigator, ...route.props }); 
    } 

    return undefined; 
    }} 
/> 

// push 
<TouchableHighlight 
    onPress={() => { 
    this.props.navigator.push({ 
     component: ContactDetails, 
     props: { /* ... */ } 
    }); 
    }} 
> 

你也可以設置終極版,但是這不是必須的。雖然如果你的應用變得更大,你應該考慮使用外部商店!


更新:

還有另一個問題。

您使用了一個功能組件。功能組件沒有this。他們收到參數中的道具。

因此,它應該是這樣的:

export default function ContactDetails(props) { 
    return (
    <View style={styles.container}> 
     <Text>{props.title}</Text> 
     <Text>{props.first}</Text> 
     <Text>{props.last}</Text> 
    </View> 
); 
} 
+0

謝謝,但是那一部分我開始工作了,問題在於另一部分,我在第一篇文章中添加了一些精確性。 – vincenth

+0

@vincenth你實際上需要兩個。您的renderScene函數當前不會傳遞參數。查看示例,我將route.props傳播到組件。所以如果你在navigator.push中把它稱爲「道具」,你需要在renderScene中傳遞道具。如果你把它叫做passProps,你應該通過passProps。 –

+0

@vincenth看到我的更新。我發現您的ContactDetails組件存在另一個問題。 –

0

替換代碼:

<TouchableOpacity 
     onPress={() => this._handlePress()} 
     style={styles.button} 
> 

有了:

<TouchableOpacity 
     onPress={() => this._handlePress()} 
     style={styles.button} 
    navigator={navigator} {...route.props} 
> 

這是罰款:

this.props.navigator.push({ 
component: ContactDetails, 
    props: { 
    title: rowData.name.title, 
    first: rowData.name.first, 
    last: rowData.name.last, 
    } 
}); 
相關問題