sử dụng Custom Tabs với StackNavigator?

Question

Tôi có danh sách người dùng, mỗi người dùng có hình ảnh hiển thị trong danh sách.

Điều tôi đang cố gắng là bất cứ khi nào người dùng nhấn vào hình ảnh hiển thị, được chuyển hướng đến tiểu sử của họ thông qua stackNavigation.

CustomTabView:

const CustomTabView = ({ router, navigation }) => { 
    const { routes, index } = navigation.state; 

    const ActiveScreen = router.getComponentForState(navigation.state); 

    const routeNav = addNavigationHelpers({ 
    ...navigation, 
    state: routes[index], 
    }); 
    const routeOptions = router.getScreenOptions(routeNav, 'tabBar'); 
    return (
    <View style={styles.container}> 
     <CustomTabBar 
     navigation={navigation} 
     activeRouteName={routes[index].routeName} 
     icon={routeOptions.tabBarIcon} 
     /> 
     <ActiveScreen 
     navigation={addNavigationHelpers({ 
      ...navigation, 
      state: routes[index] 
     })} 
     /> 
    </View> 
); 
}; 

StackNavigator: // goToProfile.js // cũng đã cố gắng đặt trong index.anndroid.js nhưng didnt tìm thấy một cách để xuất khẩu

const goToProfile = StackNavigator({ 
    Profile: { 
    screen: Profile, 
    navigationOptions: ({ navigation }) => ({ 
     title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}` 
    }) 
    }, 
}) 

tab tùy chỉnh: //index.android.js

const CustomTabRouter = TabRouter(
    { 
    Chat: { 
     screen: Chats, 
     path: "" 
    }, 
    Status: { 
     screen: Contacts, 
     path: "notifications" 
    }, 
    Camera: { 
     screen: Camera, 
     path: "settings" 
    } 
    }, 
    { 
    initialRouteName: "Chat", 
    }, 


    ); 

    const CustomTabs = createNavigationContainer(
    createNavigator(CustomTabRouter)(CustomTabView) 
    ); 

Ngoài ra thành phần của tôi:

  <TouchableOpacity 
      onPress = {() => this.props.navigation.navigate('Profile', { item }) } > 
       <Avatar 
       source={{ uri: item.picture.thumbnail }} 
       /> 
      </TouchableOpacity> 

Answer 1

stack Navigator của bạn sẽ trông như thế này:

const ChatStack= StackNavigator({ 
     Chat:{screen: Chat, 
     navigationOptions: { 
     header: null, 
    }}, 
    Profile: { 
     screen: Profile, 
     navigationOptions: ({ navigation }) => ({ 
      title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`, 
      tabBarVisible: false 
     // depending if you want to hide the tabBar on the profile page if not remove it. 
     }) 
     }, 
    }) 

Sau đó customTab của bạn sẽ hình này:

const CustomTabRouter = TabRouter(
    { 
    Chat: { 
     screen: ChatStack, 
    }, 
    Status: { 
     screen: Contacts, 
     path: "notifications" 
    }, 
    Camera: { 
     screen: Camera, 
     path: "settings" 
    } 
    }, 
......... 

Với những thay đổi mà bạn sẽ có thể điều hướng đến hồ sơ màn hình với

bạn

this.props.navigation.navigate('Profile', { item }) 

Answer 2

Bạn muốn gửi một tác vụ điều hướng, chứ không phải làm một chồng mới - Mặc dù tôi không chắc chắn hàng hải của mình được xây dựng đúng cho điều này để thành công ...

_goToProfile = (person) => { 
    <goToProfile navigate={this.props.navigation} /> 
} 

nên

_goToProfile = (person) => { 
    this.props.navigation.navigate('Profile', person) 
}