陣營母語 - 從一個屏幕傳遞到另一個數據

Question

我想學習如何使用反應本地的，所以我把一個小的應用程序從服務器獲取用戶的列表，其顯示在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, 
     }); 
    }} 
> 

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

Answer 1

所以，問題似乎在於這裏：

<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> 
); 
} 

Answer 2

我還是覺得默認的導航是很麻煩。我強烈建議使用這個庫進行路由：https://github.com/aksonov/react-native-router-flux

Answer 3

替換代碼：

<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, 
    } 
});