反应原生屏幕之间的选项卡式导航

Posted 2023-02-23

【中文标题】反应原生屏幕之间的选项卡式导航

【英文标题】：Tabbed navigation between screens in react native

【发布时间】：2018-03-17 08:59:31

【问题描述】：

我使用基于 react-native-elements 示例的 StackNavigator，并且我想启用类似于以 ID 作为参数的链接的功能。我想链接到这个屏幕：

const FontsTab = StackNavigator(
  Home: 
    screen: FontsTabView,
    path: '/',
    navigationOptions: ( navigation ) => (
      title: 'Fonts',
      headerLeft: (
        <Icon
          name="menu"
          size=30
          type="entypo"
          style= paddingLeft: 10 
          onPress=() => navigation.navigate('DrawerOpen')
        />
      ),
    ),
  ,
  Detail: 
    screen: FontsDetailTabView,
    path: 'fonts_detail',
    navigationOptions: 
      title: 'Fonts Detail',
    ,
  ,
);

我有这个屏幕，我希望单击项目的文本以打开带有 ID 作为参数的 FontsTabView。我想实现以下目标：

<Text onPress= (navigation)=> navigation.navigate('FontsTabView ', id: item.id ) style=styles.listHeader >item.title</Text>

怎么做？

class Icons extends Component 
  constructor() 
    super();
    const ds = new ListView.DataSource(
      rowHasChanged: (r1, r2) => r1 !== r2,
    );

    this.state = 
      selectedIndex: 0,
      value: 0.5,
      dataSource: ds.cloneWithRows(list1),
        isLoading: true
    ;

    this.updateIndex = this.updateIndex.bind(this);
    this.renderRow = this.renderRow.bind(this);
  

  updateIndex(selectedIndex) 
    this.setState( selectedIndex );
  

  renderRow(rowData, sectionID) 
    return (
      <ListItem
        key=sectionID
        onPress=log
        title=rowData.title
        icon= name: rowData.icon 
      />
    );
  
    _renderList = ( item, navigation ) => 

        return (
            <TouchableWithoutFeedback  onPress=(event) => this._selectedItem(item.key)>
                <View  style=styles.listRowContainer>
                    <View  style=styles.listinside1Container>
                        <Image  style=styles.listImage source=item.icon />
                        <View  style=styles.listContainer onPress=(event) => this._selectedItem(item.text)  >
                            <Text  onPress= (navigation)=> navigation.navigate('DrawerOpen')  style=styles.listHeader >item.title</Text>
                            <Text  style=styles.listValue >item.value</Text>
                            <Image 
                                style=width: 50, height: 50
                                source=uri: item.img
                            />

                        </View>
                    </View>

                                </View>
            </TouchableWithoutFeedback>
        );

    
  componentDidMount()
        return fetch('https://www.koolbusiness.com/in.json')
            .then((response) => response.json())
            .then((responseJson) => 

                this.setState(
                    isLoading: false,
                    dataSource: responseJson.movies,
                , function()

                );

            )
            .catch((error) =>
                console.error(error);
            );
    
  render() 
      if(this.state.isLoading)
          return(
              <View style=flex: 1, padding: 20>
                  <ActivityIndicator/>
              </View>
          )
      
    const  navigation  = this.props;
    const buttons = ['Button1', 'Button2'];
    const  selectedIndex  = this.state;
      if(this.state.isLoading)
          return(
              <View style=flex: 1, padding: 20>
                  <ActivityIndicator/>
              </View>
          )
      
    return (
      <ScrollView>
        <View style=styles.headerContainer>
          <Icon color="white" name="invert-colors" size=62 />
          <Text style=styles.heading>Trending Ads India</Text>
        </View>
          <View style=styles.MainContainer>


          </View>



          <View style=styles.mainWrapper >
              <FlatList data=this.state.dataSource renderItem=this._renderList  keyExtractor=(item, index) => index.toString() />

          </View>

      </ScrollView>
    );
  

【问题讨论】：

你看过这个组件了吗：github.com/sincethere/react-native-tabbar

@Raviprakash 它看起来非常好，但我已经有一个标签底部。我只需要“链接”即可工作。我的应用是印度的新应用 play.google.com/store/apps/details?id=com.koolbusiness

【参考方案1】：

你很近，但不完全在那里，

尝试如下呈现您的项目；

<Text  onPress= ()=> this.props.navigation.navigate('FontsTabView',  id: item.id )  style=styles.listHeader >
  item.title
</Text>

然后在FontsTabView 中，您可以读取如下参数并相应地渲染您的屏幕。

this.props.navigation.state.params.id

【讨论】：

什么也没发生。也许我必须导入 FontsTabView？你可以查看我打开的代码github.com/montao/trending-ads-native

以下工作并打开抽屉<Text onPress= ()=> this.props.navigation.navigate('DrawerOpen') style=styles.listHeader >但打开FontsTabView不起作用

以下工作this.props.navigation.navigate('FontsTab')