Saya mencoba membuat Settings Page seperti di React Native:

enter image description here

Menggunakan SectionList di react native, tetapi saya tidak yakin bagaimana saya meneruskan navigation untuk menautkan ke view lain.

Sebagai contoh

  • ketika saya mengklik Edit Profile, ini akan membawa saya ke halaman lain.
  • ketika saya mengklik Privacy policy, ini akan membuka halaman web dengan tautan.

KODE YANG DIPERBARUI

SettingsNavigator.js

import React from 'react';
import { createStackNavigator } from "@react-navigation/stack";

import SettingsScreen from "../screens/settingsScreen";
import EditProfileScreen from "../screens/editProfileScreen"

const SettingsStack = createStackNavigator();

const SettingsNavigator = () => (
    <SettingsStack.Navigator>
        <SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
        <SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
    </SettingsStack.Navigator>
)

export default SettingsNavigator

PengaturanLayar.js

import React from 'react';
import { Text, StyleSheet, TouchableOpacity, Linking } from 'react-native';
import { Card } from 'react-native-paper'

import Screen from '../Components/Screen'

function SettingsScreen({navigation}) {
    return (
        <Screen style={styles.screen}>
            <TouchableOpacity onPress={() => navigation.navigate("EditProfileScreen")}>
                <Card style={styles.list} >
                    <Text>Edit Profile</Text>
                </Card>
            </TouchableOpacity>
        </Screen>
    )
}

const styles = StyleSheet.create({
    list: {
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 5,
        marginTop: 10,
      },
})

export default SettingsScreen

EditProfilLayar

import React from 'react';
import { Text, StyleSheet} from 'react-native';

import Screen from '../Components/Screen'

function EditProfileScreen({navigation}) {
    return (
        <Screen style={styles.screen}>
            <Text>Edit Profile Screen</Text>
        </Screen>
    )
}

const styles = StyleSheet.create({
    
})

export default EditProfileScreen

Kesalahan saya mendapatkan:

The action 'NAVIGATE' with payload {"name":"EditProfileScreen"} was not handled by any navigator.

Do you have a screen named 'EditProfileScreen'?
0
Gurmukh Singh 10 Januari 2021, 00:02

3 jawaban

Jawaban Terbaik

Gunakan React Navigation untuk menavigasi dari satu layar ke layar lainnya dan komponen Linking dari react-native membuka URL di browser.

Aplikasi yang Berfungsi: Camilan Expo

Keluaran Aplikasi:

enter image description here

Contoh Aplikasi:

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Linking,
} from 'react-native';
import Constants from 'expo-constants';

import { Card } from 'react-native-paper';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

const url =
  'https://stackoverflow.com/questions/65647568/react-native-creating-sections-in-a-list-with-clickable-link-to-screen#65647648';

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name={'Home'} component={Home} />

        <Stack.Screen name={'EditProfile'} component={EditProfile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Home = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => navigation.navigate('EditProfile')}>
        <Card style={styles.list}>
          <Text>EditProfile</Text>
        </Card>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => Linking.openURL(url)}>
        <Card style={styles.list}>
          <Text>Privacy Policy</Text>
        </Card>
      </TouchableOpacity>
    </View>
  );
};
const EditProfile = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>EditProfile Screen</Text>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  list: {
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 5,
    marginTop: 10,
  },
});
1
Ketan Ramteke 9 Januari 2021, 21:51

Itu tergantung modul navigasi yang Anda gunakan. Saya merekomendasikan React Navigation. Dengan React Navigation, Anda dapat mengakses objek navigasi di setiap layar melalui alat peraga. Asalkan layar ada di tumpukan atau Anda telah menavigasi sebelumnya.

Anda dapat menavigasi melalui event handler onPress seperti:

onPress={() => navigation.navigate('EditProfile')}

Jangan lupa untuk membaca navigasi dari alat peraga sebelumnya

function SettingsPage({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
     // UI THINGS
    </View>
  );
}
1
Arbnor 9 Januari 2021, 21:11

Saya pikir Anda ingin meneliti Router. Saya menggunakan komponen <NavLink> dan <Link> untuk melakukan sesuatu seperti ini.

https://www.newline.co/@andreeamaco/how-to-handle-navigation-in-your-app-with-react-router-link--088f82d3

Berikut adalah video yang bagus tentang itu: Prasyarat (Mungkin Opsional): https://www.youtube.com/watch?v=eofpZPRUnP8 Berikut adalah implementasi yang sebenarnya: https://www.youtube.com/watch?v=5pt_igBTCsI&t=8s

1
monochromaticmau 9 Januari 2021, 21:11