Question

我在一个屏幕https://screencast.com/t/RQp8IrWdV5qf上有一个用户列表，当您单击列表中的任何项目时，它通过使用ListItem代码可以看到的用户ID调度showProfile操作来显示单个用户：

import React, {Component, PropTypes} from 'react'
import { connect } from 'react-redux'
import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native'
import {Actions} from 'react-native-router-flux'
import { showProfile } from '../../actions'

const ListItem = ({ user, dispatch }) => {
    return (
        <TouchableOpacity style={styles.container}
            onPress={() => {
                dispatch(showProfile(user.id));
                Actions.profile();
            }}
        >
            <View style={styles.left}>
                <Image style={styles.image} source={{uri:user.avatar.thumb}} />
                <View style={styles.text}>
                    <Text style={styles.title}>{user.display_name}</Text>
                </View>
            </View>
        </TouchableOpacity>
    )
}

ListItem.propTypes = {
    dispatch: PropTypes.func.isRequired,
    user: PropTypes.object.isRequired
}

export default connect()(ListItem);

我想要的是，当我点击右下角的“个人资料”标签时，打开具有特定ID的用户的个人资料（登录用户）：

import React from 'react'
import { Provider } from 'react-redux'
import configureStore from './configureStore'
import { Router, Scene, Route } from 'react-native-router-flux'
import Members from './components/Members/List'
import Profile from './components/Profile'
import { Text } from 'react-native'
import { showProfile } from './actions'

const Kernel = () => (
  <Provider store={configureStore()}>
      <Router>
        <Scene key="root">
          {/* Tab Container */}
          <Scene
            key="tabbar"
            tabs={true}
            tabBarStyle={{ backgroundColor: '#FFFFFF' }}
          >
            {/* Tab and it's scenes */}
            <Scene key="members" title="Members" icon={TabIcon} component={Members} initial={true}>
            </Scene>
            {/* Removed for brevity */}
            {/* Tab and it's scenes */}
            <Scene key="profile" title="Profile" icon={TabIcon} component={Profile} onEnter={dispatch(showProfile(1))}>
            </Scene>
            {/* Removed for brevity */}
          </Scene>
        </Scene>
      </Router>
  </Provider>
)

正如您所看到的，我正在尝试执行onEnter={dispatch(showProfile(1))}之类的操作。什么是正确的方法呢？

Answer 1

完成这段代码：

let TabIcon = ({ selected, title, dispatch }) => {
    if(title == "Profile") {
        return (
            <Text
                style={{color: selected ? 'red' :'black'}}
                onPress={() => {
                    if(title == "Profile") {
                        dispatch(showProfile(1));
                        Actions.profile();
                    }
                }}
            >{title}</Text>
        );
    }
    return (
        <Text
            style={{color: selected ? 'red' :'black'}}
        >{title}</Text>
    );
}

TabIcon = connect()(TabIcon);

react-native-router-flux与redux，如何在路由上发送动作？

1 个答案: