阵营母语 - 从一个屏幕传递到另一个数据

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