0

我试图在 TabNavigator 中呈现 StackNavigator。选项卡工作正常，但我无法链接按钮

简单来说，TabNavigator "Tabs" 的 "Feed" 部分内有一个按钮。单击按钮时，它应该通过 StackNavigator 转到“UserDetails.js”。请帮忙！

这是我的 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 },
});

4

3 回答 3

2

您可以通过将 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;

直接在 TabNavigator 中获取 Feed & Me 和 StackNavigator 中的 UserDetails 。有关更多详细信息，您可以参考此处的源代码 -

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

于 2018-04-15T13:23:05.007 回答
0

您需要将您的提要包装在另一个组件中：

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

于 2021-02-03T18:09:36.643 回答
0

所以我在选项卡屏幕上有一个 ListView，当我单击列表项时，它会导航到一个名为 QR 码的组件。因此，当我单击列表项时，相机将使用 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。现在它的工作。

于 2018-06-21T05:51:52.293 回答