阵营母语 - 从一个屏幕传递到另一个数据
我想学习如何使用反应本地的,所以我把一个小的应用程序从服务器获取用户的列表,其显示在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,
});
}}
>
我想我应该通过一些参数出现,但无论我尝试了上述故障。
所以,问题似乎在于这里:
<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>
);
}
我还是觉得默认的导航是很麻烦。我强烈建议使用这个库进行路由:https://github.com/aksonov/react-native-router-flux
感谢您的建议,我一定会尝试一下,我希望能够首先找到解决问题的方法 – vincenth
替换代码:
<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,
}
});
谢谢,但是那一部分我开始工作了,问题在于另一部分,我在第一篇文章中添加了一些精确性。 – vincenth
@vincenth你实际上需要两个。您的renderScene函数当前不会传递参数。查看示例,我将route.props传播到组件。所以如果你在navigator.push中把它称为“道具”,你需要在renderScene中传递道具。如果你把它叫做passProps,你应该通过passProps。 –
@vincenth看到我的更新。我发现您的ContactDetails组件存在另一个问题。 –