Не удается перейти к другому экрану с экрана в TabNavigator

Question

Я пытался рендерить StackNavigator внутри TabNavigator. Вкладки работают нормально, но я не могу связать кнопку

Проще говоря, в разделе "Feed" вкладки TabNavigator есть кнопка. При нажатии на кнопку, он должен перейти к "UserDetails.js" через StackNavigator. Пожалуйста помоги!

Вот мой index.android.js

export default class HackernoonNavigation extends Component {
  render() {
    return (  
      <Tabs />
    );
  }
}

export const Tabs = TabNavigator({
  Feed: {
    screen: Feed,
  },
  Me: {
    screen: Me,
  },
});

А вот и файл "Feed.js", внутри которого есть кнопка, которая ведет к "UserDetail.js"

export default class Feed extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Feed!
        </Text>
         <Button
          onPress={() => this.props.navigation.navigate('Details')}
          title="User Details"
        />
      </View>
    );
  } 
}

export const FeedStack = StackNavigator({
  Details: { screen: UserDetail },
});

Answer 1

Вы можете сделать это, определив tabnavigator внутри stacknavigator как экран следующим образом:

 const StackNaviApp = StackNavigator({
 UserDetails: { screen: UserDetails},
 Feed: {
  screen: TabNavigator({
    Feed: { screen: Feed},
    Me: { screen: Me}

  }, {
    tabBarOptions: { 
      showIcon: true,
      lazy: true,

      activeTintColor: '#7567B1',
      labelStyle: {
        fontSize: 16,
        fontWeight: '600'
      }
    }
  })
  }});
  export default StackNaviApp;

Получение Feed & Me внутри TabNavigator & UserDetails внутри StackNavigator напрямую. Для более подробной информации вы можете обратиться к исходному коду отсюда -

http://androidseekho.com/others/reactnative/switching-between-stack-navigator-to-tab-navigator/

Answer 2

Итак, у меня есть ListView на экране вкладок, и когда я нажимаю на элемент списка, он перемещается к компоненту с именем QR Code. Поэтому, когда я щелкаю элемент списка, камера открывается в новом окне со StackNavigator.... Я покажу вам мой код ниже. Может быть, это поможет вам найти свою ошибку.

  import React, {
        Component,
    } from 'react';
    import {
        // AppRegistry,
        // Dimensions,
        ListView,
        StyleSheet,
        Text,
        TouchableOpacity,
        TouchableHighlight,
        View,
        AsyncStorage
    } from 'react-native';

    import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view';
    import moment from 'moment';
    import{createStackNavigator} from 'react-navigation';
    import { Icon } from 'react-native-elements'

    import QrCode from '../components/QrCode';

    class SwipeList extends Component {
        static navigationOptions = {
            title: 'Scanner auswählen',
            headerTintColor: 'white',
            headerStyle: {backgroundColor: '#444444'},
            headerTitleStyle: { color: 'white' },
          };

        constructor(props) {
            super(props);
            this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
            this.state = {
                scannerAvailable:false,
                listType: 'FlatList',
                listViewData: this.ds,
        }
    ...
        goToQrCodeScreen=(scanner)=>{
           this.props.navigation.navigate('QrCode',{
                scannerName: scanner.scannerName,
                scannerValidityEnd: scanner.scannerValidityEnd,
                scannerId: scanner.scannerId,
                dataMacroId: scanner.dataMacroId,
                hash:scanner.hash,
                requestKey: scanner.requestKey,
                })
        }

    ...
        render() {
            return (
                <View style={styles.container}>


                    <View>
                    <SwipeListView
                        dataSource={this.state.listViewData}
                        renderRow={ data => (
                            <View >
                                <TouchableHighlight 
                                onPress={()=>this.goToQrCodeScreen(data)}
                                style={styles.rowFront}
                                        underlayColor={'#AAA'}>

                                    <Text>  <Text style={[styles.listItemName,styles.textBold] } >{data.scannerName} </Text>
                                    <Text style={styles.listItemValid}> gültig bis {moment(data.scannerValidityEnd).format('DD.MM.YYYY')}</Text>
                                    </Text>
                                </TouchableHighlight>
                            </View>
                        )}
                        renderHiddenRow={ (data, secId, rowId, rowMap) => (
                            <View style={styles.rowBack}>
                                <TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={ _ => this.deleteRow(data.scannerId,rowMap, `${secId}${rowId}`) }>
                                <Icon
                                name='trash'
                                type='font-awesome'
                                color='white'/>
                                <Text style={styles.backTextWhite}>
                                    Löschen</Text> 
                                </TouchableOpacity>
                            </View>
                        )}

                        rightOpenValue={-100}
                        enableEmptySections={true}
                     />
            </View>

                    </View>
            );
        }
    }


const StackNavigation = createStackNavigator(
    {
    SwipeList:SwipeList ,
    QrCode:QrCode
    },

    {
        initialRouteName: 'SwipeList',
      }
  );



export default StackNavigation;

Я удалил код, который вам не нужен. Я вызываю метод goToQrCodeScreen() для навигации. Моя вина была в том, что я не экспортировал StackNavigator. Теперь это работает.

Answer 3

вам нужно обернуть фид в другой компонент:

      const FeedStack = createStackNavigator();

function FeedWrapper() {
  return (
    <HomeStack.Navigator>
      <FeedStack .Screen name="Feed" component={Feed} />
      <FeedStack .Screen name="Details" component={Details} />
    </HomeStack.Navigator>
  );
}

см. https://reactnavigation.org/docs/tab-based-navigation