Question

我在react-native中使用深层链接，以将用户重定向到youtube频道。但是，当我返回到我的应用程序时，我有一个空白屏幕，如何使用户回到主屏幕？

这是我的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:0144017701'); }}/>
          <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

``

Answer 1

我找到了解决方法：

在您的ChaineYT中，您在下面的行中写道：

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

替换为：

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

在DeepLinking响应本机后重新获得组件

1 个答案: