#react-native
#react-native
Вопрос:
В настоящее время я пытаюсь протестировать Magic Link в действительно простом приложении React Native, поскольку я пытаюсь опробовать его перед внедрением в реальное приложение.
Редактировать — вот ссылка на документацию.
Однако, несмотря на установку SDK и следование документации, он не отвечает… Или даже, казалось бы, пытается что-то сделать. Ошибка не появляется, она просто не отвечает — так что я, должно быть, упускаю что-то действительно очевидное.
Вот компонент ‘test’ полностью (каждая строка):
import React, { useState } from 'react';
import { Text, View, TextInput, Button, StyleSheet } from 'react-native';
import { Magic } from '@magic-sdk/react-native';
const m = new Magic('API_KEY');
function App () {
const [email, setEmail] = useState('')
const onClick = async () => {
console.log(email);
m.auth.loginWithMagicLink({ email: email })
};
const logout = async () => {
await m.user.logout();
console.log(await m.user.isLoggedIn());
}
const getMeta = async () => {
const meta = await m.user.getMetadata()
console.log(meta);
};
return (
<View style={styles.view}>
<TextInput style={styles.input} value={email} onChangeText={setEmail} />
<Button style={styles.button} onPress={onClick} title="Submit" />
<Button onPress={logout} title="Logout" />
<Button onPress={getMeta} title="Get Data" />
</View>
)
}
const styles = StyleSheet.create({
view: {
marginTop: 300
},
input: {
height: 60,
width: 300,
alignSelf: 'center',
borderWidth: 1,
borderColor: 'red',
paddingLeft: 10,
borderRadius: 10
},
button: {
marginTop: 50,
marginBottom: 300
}
})
Magic Link SDK для React Native функционирует так же, как и в Web, но он не работает, несмотря на то, что я в значительной степени использую идентичный код в практическом веб-приложении, и он работает точно так, как ожидалось.
Может кто-нибудь указать, что я делаю неправильно, и почему ни одна из функций не отвечает?
К вашему сведению — журналы консоли работают… Я думаю, это проблема с Magic.
Спасибо!
Ответ №1:
Я думаю, вам не хватает компонента relayer, <m.Relayer />
Соответствующий раздел в документах
function App() {
return (
<View>
{/* Remember to render the `Relayer` component into your app! */}
<m.Relayer />
</View>
);
}