Question

当我尝试通过单击TouchableOpacity导航到另一个屏幕时出现错误。“您应该在应用程序中显式呈现一个导航器，而其他导航器应通过将其包含在该导航器中来呈现。” 我正在使用react-navigation 3，这是我的4个组件：

这是主要组成部分：

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import {createBottomTabNavigator , createNavigationContainer} from 'react-navigation'
import Home from './Compnents/Home';
import CreatePost from './Compnents/CreatePost';
import Notifications from './Compnents/Notifications';

 export class App extends React.Component {
  render() {
    return (
      <View>          
      </View>
    );
  }
}

const NavigationBar = createBottomTabNavigator({
  Home:{ screen : Home , 
  navigationOptions:{
    tabBarLabel:'home',
  }},
  Notifications:{screen : Notifications,
    navigationOptions:{
      tabBarLabel: 'notifi',
    }},
    CreatePost : {screen :CreatePost , 
    navigationOptions:{
      tabBarLabel: 'createpost',
    } },

});
export default createNavigationContainer(NavigationBar);....

第二个包含NotificationList组件：

import React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import NotificationsList from './NotificationsList';

export default class Notifications extends React.Component {

  render() {
    return (
      <View  style={styles.container} >
      <Text style={styles.HomeText}> AAA </Text>
                           <NotificationsList />   
      </View>
    );
  }
}...

最后是第三个，当我单击项目时出现错误

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import {createStackNavigator , createNavigationContainer,} from 'react-navigation';
import DonationRoom from './DonationRoom';

 const Room =createStackNavigator({
   DonationRoom : DonationRoom
 })

export default createNavigationContainer ( Room);
class NotificationsList extends React.Component {

  ItemClickListener(){

    navigate('DonationRoom');
  }

  render() {

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

            <FlatList
            data={[
                {timestamp : '2018/12/26' , comment : 'aaaaa'}  ,
                {timestamp : '2018/12/26' , comment : 'aaaaaaa'},
            ]}
            renderItem={({item})=>
            <TouchableOpacity  style={styles.item} 
            onPress={() => this.ItemClickListener()}>
                <View style={{flexDirection : 'row-reverse'}}>
                      <Text > {item.timestamp} </Text>
                    </View>
                    <Text style={{marginTop : 10 , margin:3}}> {item.comment} 
    </Text>
                </TouchableOpacity>
        }
            />
      </View>
    );
  } 
}...

打开此页面：

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default class DonationRoom extends React.Component {

  render() {

    return (
      <View  style={styles.container} >
      <Text style={styles.HomeText}>aaa </Text>
         <Text > Donaiton Room </Text>

      </View>
    );
  }
}

Answer 1

我找到了解决方案，但仍然认为这不是正确的方法，但它可行：

在第二个组件“ Notificatins”中，我只需在其中创建StackNavigator，然后将Navigation道具传递给第三个组件“ NotificationsList”，就可以这样：

class Notifications extends React.Component {

  render() {   
    return (
      <View  style={styles.container} >
      <Text style={styles.HomeText}> aaa</Text>

               <NotificationsList navigation={this.props.navigation}/>

      </View>
    );
  }
}
export default  StackNavigator = createStackNavigator({
  Notifications : {screen: Notifications , 
    navigationOptions:{
      header : null
    }},
  DonationRoom :{screen : DonationRoom ,
   navigationOptions:{
      title : 'more'
   }},
});

然后在第三个组件上，我确实将this.props.navigation.navigate('DonationRoom');添加到了ItemClickListener()函数中。

就是这样，我希望有比这个Thnx更好或更合适的解决方案。

打开另一个屏幕React-navigation 3 .. flatlist

1 个答案: