【Android、IOS、Flutter、鸿蒙、ReactNative 】页面跳转传值

TTO
403 阅读4分钟

Android Java 页面跳转传值

跳转ainActivity2传递数据

image.png

获取MainActivity传递的数据

MainActivity2获取MainActivity传递的数据。

image.png

image.png

跳转MainActivity2传递并返回数据

image.png

关闭MainActivity2页面返回数据

image.png

获取MainActivity2返回的数据

image.png

跳转多个页面返回传递数据

MainActivity 跳转 MainActivity2 再跳转MainActivity3, 再回到MainActivity并传递数据。

设置MainActivity 启动模式位 singleTask：

image.png

从 MainActivity3 返回到 MainActivity：

image.png

MainActivity的 onNewIntent 函数被执行：

image.png

使用adb命令查看任务栈中的Activity 参考CSDN

    adb shell dumpsys activity activities

当 MainActivity 设置启动模式为singleTask时，从 MainActivity3 回到 MainActivity：

MainActivity3关闭前： image.png

MainActivity3关闭后： image.png

当 MainActivity 采用默认的启动模式时，从 MainActivity3 回到 MainActivity：

MainActivity3关闭前： image.png

MainActivity3关闭后：

image.png

Android Kotlin 页面跳转传值

定义实现序列化的Bean类SerializableBean

image.png

定义实现序列化的Bean类SerializableBean

Gradle 引入插件 kotlin-parcelize

image.png

image.png

跳转ainActivity2传递数据

image.png

获取MainActivity传递的数据

MainActivity2获取MainActivity传递的数据。 image.png

跳转MainActivity2传递并返回数据

image.png

关闭MainActivity2页面返回数据

image.png

获取MainActivity2返回的数据

image.png

跳转多个页面返回传递数据

MainActivity 跳转 MainActivity2 再跳转MainActivity3, 再回到MainActivity并传递数据。

设置MainActivity 启动模式位 singleTask： image.png

从 MainActivity3 返回到 MainActivity： image.png

MainActivity的 onNewIntent 函数被执行： image.png

IOS Object-c 页面跳转传值 参考简书

创建ViewController

image.png

image.png

创建ViewController1

image.png

image.png

创建UserBean类

image.png

image.png

ViewController向Viewcontroller1传值

image.png

ViewController1 打印ViewController传递到值

image.png

ViewController1关闭传值到ViewController

声明协议和代理方法, 设置代理(ARC用weak,MRC用assign)

image.png

让代理执行代理方法(代理传值)

image.png

签订代理协议

image.png

指定代理, ViewController1关闭时,传递值到ViewController image.png

实现代理方法(结果)

image.png

跳转多个页面后直接回到ViewController

image.png

IOS Swift 页面跳转传值 Object-c转Swift

创建ViewController

image.png

将ViewController设置为根视图

image.png

创建ViewController1

image.png

创建UserBean类

image.png

ViewController向Viewcontroller1传值

image.png

ViewController1 打印ViewController传递到值

image.png

ViewController1关闭传值到ViewController

声明协议和代理方法 image.png

让代理执行代理方法(代理传值) image.png

签订代理协议 image.png

指定代理, ViewController1关闭时,传递值到ViewController image.png

实现代理方法(结果) image.png

跳转多个页面后直接回到ViewController

image.png

Android Compose 页面跳转传值

参考简书 参考CSDN

创建工程新建 ComponentActivity

image.png

创建RouteConfig

RouteConfig是用于方便管理路由地址和路由参数等的配置文件：

image.png

添加导航依赖

image.png

创建PageOne

image.png

创建PageTwo

image.png

创建PageThree

image.png

创建PageFour

image.png

创建管理应用内导航组件

image.png

image.png

PageOne传值到PageTwo

image.png

PageTwo接受参数

image.png

PageFour返回PageOne使用ViewModel回传参数

image.png

Flutter页面跳转传值

创建PageOne页面

image.png

创建pageTwo页面

image.png

创建PageThree页面

image.png

配置路由集合

image.png

PageOne向PageTwo传值

image.png

PageTwo获取传参

image.png

PageTwo关闭传参

image.png

PageOne获取PageTwo传递到参数

image.png

PageThree回到PageOne传递参数

image.png

Flutter Getx 页面跳转传值 参考CSDN

添加 get 依赖

image.png

创建 MyHomePage

image.png

创建 MyPageTwo

image.png

创建 MyPageThree

image.png

配置路由地址

image.png

Get.toNamed MyPageOne跳转PageTwo传值

image.png

Get.arguments 获取MyPageOne传递的值

image.png

Get.back MyPageTwo关闭返回值

image.png

MyHomePage 获取返回值

image.png

Get.offAllNamed 关闭所有路由并跳转到MyHomePage

image.png

image.png

鸿蒙 页面跳转传值 UIAbility内页面间的跳转

创建 Index.ets

image.png

创建 TwoPage.ets

image.png

创建 ThreePage.ets

image.png

main_pages.json 配置页面的路径信息

image.png

Index跳转TwoPage传值

image.png

image.png

TwoPage页面关闭传值

image.png

image.png

ThreePage 页面关闭传值

image.png

image.png

ReactNative 页面跳转传值 参考React Navigation

安装相关依赖

yarn add @react-navigation/native@next

yarn add @react-navigation/native-stack@next

导入需要依赖组件

import * as React from 'react';
import { View, Text ,Button,} from 'react-native';
import { NavigationContainer, useNavigation,createStaticNavigation,} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

image.png

创建页面配置导航器

import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';

import * as React from 'react';
import { View, Text ,Button,} from 'react-native';
import { NavigationContainer, useNavigation,createStaticNavigation,} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function PageOne({route}) {
  const navigation = useNavigation();

  // Use an effect to monitor the update to params
   React.useEffect(() => {
      if (route.params?.post) {
        // Post updated, do something with `route.params.post`
        // For example, send the post to the server
        alert('New post: ' + route.params?.post);
      }
   }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{lineHeight:50,textAlign:'center'}}>Page One</Text>
      <Button
        title="跳转到PageTwo"
        onPress={() => {
          navigation.navigate('PageTwo', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
      <Text style={{ margin: 10 }}>其他页面返回的数据: {route.params?.post}</Text>
    </View>
  );
}

function PageTwo({ route }) {
  const navigation = useNavigation();

  const { itemId, otherParam } = route.params;

  const [postText] = React.useState('PageTwo返回的数据');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
              title="返回PageOne"
              onPress={() => {
                // Pass params back to home screen
                navigation.popTo('PageOne', { post: postText });
              }}
            />
      <Button
              title="跳转到PageThree"
              backgroundColor = {'blue'}
              style={{ width: 200 }}
              onPress={() => {
                navigation.navigate('PageThree',);
              }}
            />
    </View>
  );
}

function PageThree({ route }) {
  const navigation = useNavigation();
  const [postText] = React.useState('PageThree返回的数据');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
              title="返回PageOne"
              onPress={() => {
                // Pass params back to home screen
                navigation.popTo('PageOne', { post: postText });
              }}
            />
    </View>
  );
}

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

function RootStack() {
  return (
    <Stack.Navigator initialRouteName="PageOne">
      <Stack.Screen name="PageOne" component={PageOne} />
      <Stack.Screen name="PageTwo" component={PageTwo} />
      <Stack.Screen name="PageThree" component={PageThree} />
    </Stack.Navigator>
  );
}

AppRegistry.registerComponent(appName, () => App);

PageOne跳转PageTwo传递参数

image.png

image.png

PageThree返回PageOne并传递参数

image.png

image.png

案例

image.png

avatar
文章
阅读
粉丝