Question

我尝试在TabNavigator中渲染StackNavigator。选项卡工作正常，但我无法链接按钮

简单来说，＆＃34; Feed＆＃34;中有一个按钮。 TabNavigator的一部分＆＃34; Tabs＆＃34; 。单击按钮时，它应该转到＆＃34; UserDetails.js＆＃34;通过StackNavigator。请帮忙！

这是我的index.android.js

＆＃13;

export default class HackernoonNavigation extends Component {
  render() {
    return (  
      <Tabs />
    );
  }
}

export const Tabs = TabNavigator({
  Feed: {
    screen: Feed,
  },
  Me: {
    screen: Me,
  },
});

＆＃13;

这是文件＆＃34; Feed.js＆＃34; ，里面有一个通向＆＃34; UserDetail.js＆＃34;

的按钮

＆＃13;

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

＆＃13;

Answer 1

您可以通过将stacknavigator内部的tabnavigator定义为屏幕来实现，就像这样 -

 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;

采取饲料＆amp;我在TabNavigator＆amp; UserDetails直接在StackNavigator中。有关更多详细信息，请参阅此处的源代码 -

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

Answer 2

所以我在选项卡屏幕上有一个ListView，当我单击List Item时，它导航到名为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

无法通过TabNavigator

3 个答案: