我需要让我的按钮重定向到另一个页面(js 文件)
I need to make my button redirect to another page(js file)
我有一个主页,其中包含具有 onClick 功能的按钮,但现在我需要让按钮能够将我定向到不同的页面。
这是我的主页atm:
import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { Link } from 'react-router-dom'
export default class ButtonBasics extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={pressHandler}
title="Lesson 1"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={pressHandler}
title="Lesson 2"
color="#841584"
/>
</View>
</View>
);
}
}
我需要按钮将我定向到同一地图中的 js 文件,最好的方法是什么?我对 React Native 还是很陌生。
这是需要定向到的页面:
import React, {useState} from 'react';
import { StyleSheet, View, Text, ButtonSafeAreaView,TouchableOpacity,FlatList,SafeAreaView} from 'react-native';
import { globalStyles } from '../../../styles/global';
const GLOBAL = require('../../assets/Globals');
const lessondata = ("../../assets/json/" + global.currentLesson + ".json");
import jsondata from "../../assets/json/1.json";
export default function Lessen({ App, navigation }) {
const pressHandler = () => {
navigation.goBack();
}
const DATA = jsondata["data"];
function Item({ id, title, selected, onSelect }) {
return (
<TouchableOpacity
onPress={() => onSelect(id)}
style={[
styles.item,
{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
const [selected, setSelected] = React.useState(new Map());
const onSelect = React.useCallback(
id => {
const newSelected = new Map(selected);
newSelected.set(id, !selected.get(id));
setSelected(newSelected);
},
[selected],
);
return (
<SafeAreaView style={globalStyles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => (
<Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/>
)}
keyExtractor={item => item.id}
extraData={selected}
/>
</SafeAreaView>
);
}
React Navigation(Stack) 适合你
react navigation
步骤:-
1. 为导航创建一个单独的文件
在导航组件中导入两个组件
onPress 调用了 navigation.navigate('TargetComponent')
希望对您有所帮助。
我有一个主页,其中包含具有 onClick 功能的按钮,但现在我需要让按钮能够将我定向到不同的页面。
这是我的主页atm:
import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { Link } from 'react-router-dom'
export default class ButtonBasics extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={pressHandler}
title="Lesson 1"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={pressHandler}
title="Lesson 2"
color="#841584"
/>
</View>
</View>
);
}
}
我需要按钮将我定向到同一地图中的 js 文件,最好的方法是什么?我对 React Native 还是很陌生。
这是需要定向到的页面:
import React, {useState} from 'react';
import { StyleSheet, View, Text, ButtonSafeAreaView,TouchableOpacity,FlatList,SafeAreaView} from 'react-native';
import { globalStyles } from '../../../styles/global';
const GLOBAL = require('../../assets/Globals');
const lessondata = ("../../assets/json/" + global.currentLesson + ".json");
import jsondata from "../../assets/json/1.json";
export default function Lessen({ App, navigation }) {
const pressHandler = () => {
navigation.goBack();
}
const DATA = jsondata["data"];
function Item({ id, title, selected, onSelect }) {
return (
<TouchableOpacity
onPress={() => onSelect(id)}
style={[
styles.item,
{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
const [selected, setSelected] = React.useState(new Map());
const onSelect = React.useCallback(
id => {
const newSelected = new Map(selected);
newSelected.set(id, !selected.get(id));
setSelected(newSelected);
},
[selected],
);
return (
<SafeAreaView style={globalStyles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => (
<Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/>
)}
keyExtractor={item => item.id}
extraData={selected}
/>
</SafeAreaView>
);
}
React Navigation(Stack) 适合你 react navigation
步骤:- 1. 为导航创建一个单独的文件
在导航组件中导入两个组件
onPress 调用了
navigation.navigate('TargetComponent')
希望对您有所帮助。