Ten błąd pojawia się po uruchomieniu aplikacji:
błąd: wiązanie nie powiodło się: Błąd: nie można rozwiązać modułu react-native-safe-area-context
z node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js
: w projekcie nie można znaleźć kontekstu native-safe-area-area-kontekst.
Ale to samo zrobiłem dla mojej starej wersji demo. Działa idealnie dobrze.
Nie wiem, co robię źle tutaj. Proszę sprawdzić mój kod:
Do instalacji:
- React Native Navigation & Gesture Handler:
npm install --save react-navigation
npm install --save react-native-gesture-handler
- React Native Stack:
npm install --save react-navigation-stack
App.js
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import FirstOptionsPage from "./FirstOptionsPage";
const MainNavigator = createStackNavigator(
{
FirstOptions: FirstOptionsPage
},
{
defaultNavigationOptions: {
headerStyle: {
// backgroundColor: '#28F1A6',
elevation: 0,
shadowOpacity: 0
},
headerTintColor: "#ca375e",
headerTitleStyle: {
fontWeight: "bold",
color: "#161616"
}
}
}
);
const App = createAppContainer(MainNavigator); // For setting Navigation Stack
export default App;
I FirstOptionsPage.js:
import React from "react";
import {
SafeAreaView,
StyleSheet,
View,
Text,
ScrollView,
Switch
} from "react-native";
export default class FirstOptionsPage extends React.Component {
static navigationOptions = {
title: "Preferences"
};
constructor(props) {
super(props);
this.state = {
switch1Value: false
};
}
toggleSwitch1 = value => {
this.setState({ switch1Value: value });
console.log("Switch 1 is: " + value);
};
render() {
const { navigate } = this.props.navigation;
return (
<SafeAreaView style={styles.mainContainerStyle}>
<View style={styles.subContainerStyle}>
<Text style={styles.subtitleTextStyle}>Someone likes my post</Text>
<View style={styles.switchStyle}>
<Switch
onValueChange={this.toggleSwitch1}
value={this.state.switch1Value}
thumbColor={MAGENTA_COLOR_CODE}
trackColor={{
false: GREY_COLOR_CODE,
true: DARK_GREY_COLOR_CODE
}}
/>
</View>
</View>
</SafeAreaView>
);
}
}
Jestem nowy w React-Native. Pomóż mi to naprawić.
react-native
react-native-android
react-native-ios
react-native-navigation
Gautam Shrivastav
źródło
źródło
react-native-safe-area-context
w swoich modułach węzłów,react-navigation-stack
wymaga tego, ale moduły węzłów tego nie mająOdpowiedzi:
Myślę, że problem tkwi w tym
SafeAreaView
, że w nowej wersji z reakcją natywną został migrowanyreact-native-community/react-native-safe-area-view
. jeśli chcesz użyćSafeAreaView
, powinieneś go najpierw zainstalować.nowe zastosowanie wygląda następująco:
do instalowania go można użyć następujących poleceń:
yarn add react-native-safe-area-view react-native-safe-area-context
.jeśli nie korzystasz z automatycznego łączenia, musisz je również połączyć. Aby uzyskać szczegółowe informacje na ten temat, zobacz ten link
źródło
error: bundling failed: Error: Unable to resolve module `@react-native-community/masked-view` from `node_modules/react-navigation-stack/lib/module/vendor/views/MaskedView.js`: @react-native-community/masked-view could not be found within the project.
@react-native-community/masked-view
aby to naprawić. Następnie mój kod działał pomyślnie. Dzięki za pomoc.To trochę zabawne, chciałem dodać nawigację, więc dodałem
aby to działało dobrze, musiałem dodać:
Potem mam
wtedy mam
Więc szukałem widoku zamaskowanego (który obecnie nie jest obsługiwany przez expo, zgodnie z jego dokumentem git). Potem dowiedziałem się, że używam kota:
Dlatego odtąd korzystam z następujących poleceń na początku wszystkich moich projektów rodzimych reagowania, aby móc poprawnie korzystać z nawigacji:
źródło
Po uruchomieniu tych poleceń:
To spowodowało błąd dotyczący widoku zamaskowanego, więc musiałem również uruchomić,
npm i @react-native-community/masked-view
a następnie mój kod można teraz pomyślnie uruchomić na urządzeniu fizycznym z Androidem.Dzięki Lenoarod i Gautam Shrivastav za wskazanie właściwego kierunku.
źródło
0.60
i wyższą, użyj przędzy zamiast npm i nie łącz .Myślę, że brakuje Ci zależności linków do swojego projektu, więc możesz spróbować, jak poniżej:
Z React Native 0.6 lub nowszym:
W systemie iOS upewnij się, że masz zainstalowane Cocoapods i uruchom:
Z React native 0.59 i niższym spróbuj:
źródło
skopiuj wszystko i wklej w terminalu
Pracuj dla mnie
źródło
Uruchom następujące czynności:
expo
wybierze odpowiednią wersję, a następnie ją zainstaluje.źródło
użyj polecenia polecam npm i reaguj-nawigacja-stos t rozwiązać ten błąd
źródło
Uruchamianie Metro Bundlera bezpośrednio z katalogu projektu działa dla mnie. Czy ktoś może mi powiedzieć, czy to też działa dla nich?
# Wyczyść pamięć podręczną rm -rf $ TMPDIR / reaguj ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; watchman watch-del-all
* # Start Metro Bundler bezpośrednio reaguje na start macierzysty
* # Teraz uruchom
react-native run-android
lubreact-native run-ios
w innej zakładceźródło