react-native - DeepLinking react native 后返回组件

Question

我在 react-native 中使用深度链接，以便将用户重定向到 youtube 频道。但是当我回到我的应用程序时，我有一个空白屏幕，我怎样才能让用户回到 homeScreen ？

这是我的 YouTube 代码：

import React from 'react';
import { View, Text, Linking } from 'react-native';
import Acceuil from './Accueil';


class ChaineYT extends React.Component {

  state = {
    isLoading:false,
    isLinked: false
  }

  componentDidMount = () => {
    Linking.openURL('vnd.youtube://' + 'www.youtube.com/channel/UC1UpcbyFVTZTDrvdjNmSzSg')
    this.setState(isLoading=true, isLinked=true);

    if(this.state.isLoading && this.state.isLinking){
      return this.props.navigation.navigate("Acceuil")
    }
  }

  render() {
    return (
      <View>

      </View>
    )
  }
}

export default ChaineYT

我不确定我正在使用的状态。

编辑：我已经更新了 Accueil.js 屏幕。

import React from 'react';
import { StyleSheet, View, TextInput, Button, Text, FlatList, ListView, Linking, StatusBar } from 'react-native';
import voyantes from '../Helpers/voyantesData';
import VoyanteItem from './VoyanteItem';
import MyButton2 from './MyButton2';

const numColumns = 2;
class Accueil extends React.Component {

  _displayDetailForVoyante = (idVoyante,photo, specialite, description, name) => {
    console.log("Display film with id " + idVoyante);
    this.props.navigation.navigate("VoyanteProfil", { idVoyante: idVoyante,photo: photo,specialite:specialite,description:description, name:name });
  }

  render() {
    return (
      <View style={styles.main_container}>
        <View style={{ flexDirection:'row', justifyContent: 'space-around', marginVertical: 8 }}>
          <MyButton2 style={{}} text={"Voyance privée\nouvert 24h/24\n01 44 01 77 01"} icone='icone-transfert' onPress={() => { Linking.openURL('tel:[phone]'); }}/>
          <MyButton2 text={"Voyance sans CB\nouvert 24h/24\n32 32"} icone='icone-sonnerie' onPress={() => { Linking.openURL('tel:3232'); }}/>
        </View>
        <FlatList style={styles.flatList}
        data={voyantes}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({item}) => <VoyanteItem voyante={item} displayDetailForVoyante={this._displayDetailForVoyante} />}
        numColumns={numColumns} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    backgroundColor: '#dfdee1',
    backgroundColor: 'white',
    flexDirection: 'column',
    },
  textinput: {
    marginLeft: 5,
    marginRight: 5,
    height: 50,
    borderColor: '#000000',
    borderWidth: 1,
    paddingLeft: 5,
    backgroundColor: 'white'
  },
  button: {
    backgroundColor: '#EF3934',
    borderColor: '#EF3934',
    marginLeft: 20,
    marginRight: 20
  },
  text: {
    backgroundColor: '#EF3934',
    borderColor: '#EF3934',
    marginLeft: 20,
    marginRight: 20
  },
  flatList: {
    flex: 1,
    flexDirection: 'column',
    alignContent: 'flex-start',
    //justifyContent: 'flex-start',
    //alignItems: 'flex-start'
  }
})

export default Accueil

``

标签： react-nativedeep-linking

Answer 1

我找到了解决方案：

在您的ChaineYT以下行中：

this.setState(isLoading=true, isLinked=true);

将其替换为：

this.setState({isLoading:true, isLinked:true});