从选项卡导航到堆栈的下一个屏幕不起作用

时间:2019-01-31 12:01:44

标签: react-native-navigation

从索引到启动=>使其工作正常。家用组件中有2个选项卡,每个选项卡都有一个平面列表,我想从Tab_One Component ...中单击FlatList的项目移到下一个屏幕或堆栈组件。...

  

索引组件

   const Drawer = DrawerNavigator(
          {
            Home: { screen: Home },
          } ,
          {
            initialRouteName: "Home",
            contentOptions: {
              activeTintColor: "#e91e63"
            },
            contentComponent: props => <SideBar {...props} />
          }
        );

        Drawer.navigationOptions = ({ navigation }) => ({
          header: null
        });


        const AppNavigator = StackNavigator(
          {
            //user define props
            Splash: { screen: Splash },
            Login:  { screen: Login },
            List:   { screen: List },
            Card:   { screen: Card },
            Home:   { screen: Home },
            Drawer: { screen: ({navigation}) => <Drawer screenProps={{rootNavigation: navigation}} />
          }
          },
          {
            index: 0,
            initialRouteName: "Splash",
            headerMode: "none"
          }
        );


        export default class CustomDrawer extends Component {
          componentDidMount() {

             // this.getData();
           }
          render () {
            return (
              <AppNavigator />
            );
          }

          saveData(){
          try {
              let obj = {
                name : 'waleediqbal',
                refreshtoken : 'fsdffsdfsd' ,
                accesstoken : 'erter' ,
                username : 'waleed@iqbal' ,
                password : '123456',
                email : 'waleed@cogilent.com',

              };
               alert("Task added successfully");
              AsyncStorage.setItem('user', JSON.stringify(obj));
            }
           catch (e) {
            alert(e);
          }
        }

          getData() {
          helpers.getUser().then((value) => {
                  alert(JSON.parse(value).email);
                }).done();
            }
        }
        AppRegistry.registerComponent('Far', () => CustomDrawer);
  

Splash Component(移动到stacknavigator中定义的Drawer意味着它实际上从此处移动到Home Component)

    export default class Splash extends Component {

      componentDidMount(){
        setTimeout(()=>{

            helpers.getUser().then((value) => {
              if(value===null){
                 console.log("login","null");
                const UserData =  {"id":null, "email": null,"login":"false"};
                helpers.saveUser(UserData);
                this.props.navigation.replace("Login");
              }
              else if(JSON.parse(value).login==="false"){
                console.log("login","false");
                this.props.navigation.replace("Login");
              }
              else{
                  console.log("login","smooth");
                  this.props.navigation.replace("Drawer");
              }
            }).done();

        },1000);
      }
      render() {
        return (
          <View style={styles.container}>
            <StatusBar
              barStyle="light-content"
              backgroundColor="#4F6D7A"
            />
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit App.js
            </Text>
            <Text style={styles.instructions}>
              {instructions}
            </Text>
          </View>
        );
      }

    }
  

主页组件(该组件包含2个选项卡)

const AccountTabNav = TabNavigator(
{
Tab_One:
  {
  screen: Tab_One,
  navigationOptions: {
  title: "Running"
 }
},
Tab_Two:
  {
  screen: Tab_Two,
  navigationOptions: {
  title: "Completed" }
  }
},
{
  tabBarOptions : {
    activeTintColor: 'white',
    style: {
      backgroundColor: '#002D62',

    },
    indicatorStyle: {
            backgroundColor: 'white',
        }
  }
},
{
backBehavior: "none",
tabBarPosition: "top"
}
);
export default class Home extends Component {

    static navigationOptions = ({ navigation }) => {
        return
        {
         headerLeft: (
             <View style={{ padding: 10 }}>
                 <Ionicons name="md-menu" size={24} onPress={() => navigation.navigate('DrawerOpen')} />
             </View>
         )
     }

    }
    render() {
        return (
          <Container>
          <Header style = {{ backgroundColor: '#FFFFFF' }}>
            <Left>
              <Button
                transparent
                onPress={() => this.props.navigation.navigate("DrawerOpen")}
              >
                <Icon name="menu" style={{color :'#002D62', size : 30}}/>
              </Button>
            </Left>
            <Body>
            <Title style = {{ color : '#002D62',fontSize: 20, fontWeight: 'bold'}}>Khata</Title>
            </Body>

          </Header>
            <AccountTabNav screenProps={{ navigation: this.props.navigation }} />
        </Container>

        )
    }
}
  

Tab_One(在选项卡组件中定义的第一个选项卡。它包含一个列表,我想从单击列表项时移至堆栈组件的其他屏幕,但它不起作用,没有错误,但不能导航)

export default class Tab_One extends Component {

  constructor(props) {
    super(props);
    this.state = {
         runningList: null,
         loading: true,
         userid: null,
         refreshing : false
     }
     this.renderItem = this.renderItem.bind(this);
     this._onPress = this._onPress.bind(this);
  }
  async componentDidMount() {

   const value = await AsyncStorage.getItem("UserData");
   this.setState({userid:  JSON.parse(value).id});

   const runningApiCall = await fetch('https://opmlfar.net/api/audit', {
     method: 'POST',
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({
       user_id : this.state.userid,
     }),
     });

    try {
      const running = await runningApiCall.json();
      console.log("data-", running);
      this.setState({runningList: running, loading: false});
      this.onStop();
    }
    catch(err) {
      console.log("Error fetching data-----------", err);
      this.onStop();
    }

  }
  actionOnRow(item) {
     console.log('Selected Item :',item);
     Alert.alert('You tapped the button!');
  }
  _onPress (id){
    console.log('Selected Item :');
    alert(this.props.navigation.state);
    console.log(this.props.navigation.state);
    this.props.screenProps.navigation.navigate('Card');

  }

  onRefresh = ()=>{
        this.setState({refreshing : true});
        this.componentDidMount();
    }
  onStop = ()=>{
          this.setState({refreshing : false});
  }

  renderItem(data) {
          return <TouchableOpacity style={{backgroundColor: 'transparent'}}  onPress= {()=>  this.props.screenProps.navigation.navigate('Card')}>
                    <Card flexDirection='column' >
                       <View style={{flex: 1,flexDirection:'row',left:10,marginTop:10}}>
                         <Icon  color='#BDC3C7' name='adjust' size={15} style={{height:18}} />
                         <Text style={{fontSize:16, fontWeight:'bold', marginLeft:10 , flex:0.9, color:'#002D62'}}>
                           {data.item.project.name}
                         </Text>
                         <Icon  color='#002D62' name='settings' size={25} style={{ height:18, flex:0.1, justifyContent: "right",alignItems: "right" }} />
                       </View>
                       <View style={{flex: 1,flexDirection:'row',left:16, marginTop:0, marginBottom:2}}>
                         <Dash dashColor= '#BDC3C7' style={{width:1, height:23, flexDirection:'column', overflow: 'hidden'}}/>
                         <Text style={{fontSize:14, fontWeight:'normal',marginLeft:21, flex:0.7, justifyContent: "center",alignItems: "center" }}>
                           {data.item.start_date}  |  {data.item.end_date}
                         </Text>
                       </View>
                       <View style={{flex: 1,flexDirection:'row',left:10,marginBottom:10}}>
                         <Icon name='place' color='#BDC3C7' size={15}/>
                         <Text style={{ fontSize:14, fontWeight:'bold', marginLeft:12, marginTop:-2, color :'#797D7F'}} >
                           {data.item.status_name}
                         </Text>
                       </View>
                    </Card>
                 </TouchableOpacity>
      }
  render() {
     const { navigation, screenProps } = this.props
     const { runningList, loading } = this.state;
        if(!loading) {
          return (
                <Container>
                  <Content padder>
                  <TouchableHighlight onPress={this.onRefresh}>
                  <Text style={{fontSize:14, fontWeight:'normal', marginRight:10 ,textAlign: 'right', alignSelf: 'stretch', flex:0.9, color:'#002D62',marginBottom:5}}>
                    Refresh
                  </Text>
                  </TouchableHighlight>
                  <ScrollView
                     refreshControl={
                       <RefreshControl
                         refreshing={this.state.refreshing}
                         onRefresh={this.onRefresh}
                       />
                     }

                   >
                   <FlatList
                     data={runningList.audits}
                     renderItem={this.renderItem}
                     keyExtractor={(item) => item.id}
                     refreshing ={this.state.refreshing}
                     onRefresh ={this.onRefresh}
                     />
                     </ScrollView>
                  <Image
                      source={require("./../../../assets/fireworks.gif")}
                      style={styles.image}
                    />
                  </Content>
                </Container>
        );
        } else {
            return <ActivityIndicator size="large" color="#002D62" style= {{marginTop:10}}/>
        }
  }

}
  

Blockquote

0 个答案:

没有答案