分类前端技术下的文章

2024-08-14

Vue.js 是一个渐进式的JavaScript框架，所谓渐进式就是可以根据需要引入Vue的不同特性。Vue的核心库提供了MVVM模式的实现，MVVM模式使得数据和视图分离，简化了开发过程。

以下是一个基本的Vue应用的例子：




<!DOCTYPE html>
<html>
<head>
    <title>Vue 基础入门</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
 
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        // 创建一个Vue实例
        new Vue({
            el: '#app', // 指定挂载点
            data: { // 定义数据
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

在这个例子中，我们创建了一个Vue实例，并挂载到id为app的DOM元素上。在这个实例中，我们定义了一个数据属性message，并在页面上通过{{ message }}的形式展示出来。当我们更改message的值时，页面上显示的内容也会自动更新。这就是Vue的响应式系统，它使得更新界面这一操作变得极其简单和高效。

- 阅读更多 -

手写Redux：实现React-redux

System

2024-08-14

所有,react native




import React, { Component } from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
 
// 假设有一个reducer函数
function counter(state = { value: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
}
 
// 创建一个Redux store
const store = createStore(counter);
 
// 连接组件到Redux store
const mapStateToProps = (state) => ({
  count: state.value
});
 
const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});
 
class Counter extends Component {
  render() {
    return (
      <div>
        <p>Count: {this.props.count}</p>
        <button onClick={this.props.increment}>Increment</button>
        <button onClick={this.props.decrement}>Decrement</button>
      </div>
    );
  }
}
 
const ConnectedCounter = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);
 
// 在App组件中使用Provider来包裹ConnectedCounter
class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ConnectedCounter />
      </Provider>
    );
  }
}
 
export default App;

这段代码展示了如何在一个React应用中使用Redux。首先创建了一个简单的reducer函数，然后创建了一个store。接着使用connect函数将React组件连接到Redux store，并定义了state到props的映射以及dispatch方法到props的映射。最后，在App组件中使用<Provider>组件来包裹已连接的Counter组件，使得Counter组件可以从上下文中访问store。

- 阅读更多 -

React技术原理与代码开发实战：React Native介绍与环境搭建

System

2024-08-14

所有,react native




import React from 'react';
import { Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>React Native 环境搭建成功!</Text>
      </View>
    );
  }
}

这段代码演示了如何在React Native项目中创建一个简单的组件，这个组件在屏幕中央显示一条文本信息。这是学习React Native的一个基本示例，也展示了如何使用React Native的基本组件<Text>和<View>进行布局。

System

2024-08-14

所有,react native




import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import MapView from 'react-native-mapview';
import { RasterLayer } from '@arcgis/core';
 
export default class RasterLayerExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rasterLayer: null,
    };
  }
 
  componentDidMount() {
    // 创建RasterLayer实例
    const rasterLayer = new RasterLayer({
      url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLDI/ArcGIS_Rest_Services_World/MapServer',
    });
    this.setState({ rasterLayer });
  }
 
  render() {
    const { rasterLayer } = this.state;
    return (
      <View style={styles.container}>
        {rasterLayer && (
          <MapView style={styles.mapView} mapProperties={{ basemap: 'satellite' }}>
            {/* 将RasterLayer作为子组件添加到MapView中 */}
            <rasterLayer.layer />
          </MapView>
        )}
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapView: {
    flex: 1,
  },
});

这段代码展示了如何在React Native应用程序中使用ArcGIS的RasterLayer。首先，在组件挂载后，创建并初始化RasterLayer实例。然后，在render方法中，当rasterLayer实例存在时，将其作为子组件嵌入到MapView中，并设置卫星卫星底图作为地图的底图。

- 阅读更多 -

改变expo创建的react native项目的默认图标

System

2024-08-14

所有,react native

要更改Expo创建的React Native项目的默认图标，你需要按照以下步骤操作：

找到你的React Native项目中app.config.js文件（或者app.json，取决于你的项目创建时的Expo SDK版本）。
在app.config.js文件中，找到expo.ios.icon和expo.android.icon字段。
替换这些字段的source属性为你自己的图标文件路径。
确保你的图标文件是正确的格式和大小。

以下是一个简单的例子，展示如何更改iOS和Android的图标：




// app.config.js 或 app.json
 
{
  "expo": {
    "name": "YourProject",
    "slug": "YourProject",
    "sdkVersion": "XX.0.0",
    "platforms": ["ios", "android"],
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp",
      "icon": "./path/to/your-icon.png" // 替换为你的图标文件路径
    },
    "android": {
      "package": "com.yourcompany.yourapp",
      "icon": "./path/to/your-icon.png" // 替换为你的图标文件路径
    },
    // ... 其他配置
  }
  // ... 其他配置
}

确保替换./path/to/your-icon.png为你的图标文件的实际文件路径，并且图标文件应该是PNG格式，且符合iOS和Android的图标规范要求。

更新配置后，重新加载或启动你的React Native项目，新的图标应该会显示。

- 阅读更多 -

0604嵌套路由与路由传参-react路由-react

System

2024-08-14

所有,react native




import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/parent/:parentId">
            {/* 当前路由的参数可以通过match对象访问 */}
            <Child />
          </Route>
          <Route path="/">
            <h1>Welcome to the main page</h1>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
 
function Child({ match }) {
  // 使用match.params来访问嵌套路由的参数
  const { parentId } = match.params;
  return (
    <div>
      <h1>Parent ID: {parentId}</h1>
      {/* 嵌套路由 */}
      <Router>
        <Switch>
          <Route path="/parent/:parentId/child/:childId">
            <h2>Child ID: {match.params.childId}</h2>
          </Route>
        </Switch>
      </Router>
    </div>
  );
}
 
export default App;

这个代码示例展示了如何在React应用中使用react-router-dom进行嵌套路由以及如何在嵌套路由中传递参数。App组件定义了顶级路由，并在匹配/parent/:parentId路径时渲染Child组件。Child组件内部再定义了嵌套的子路由/parent/:parentId/child/:childId，并在此路由下渲染相关的组件。通过match.params对象，嵌套路由可以访问父级和自己的参数。

System

2024-08-14

所有,react native




import React, { useCallback } from 'react';
import { Animated, Text, TouchableOpacity } from 'react-native';
import { useAnimatedValue, useSharedValue, withTiming } from 'react-native-animation-hooks';
 
const App = () => {
  const scale = useSharedValue(1);
  const rotate = useAnimatedValue(0);
 
  const animate = useCallback(() => {
    scale.value = withTiming(1.2, { duration: 200 });
    rotate.value = withTiming((rotate.value + 360) % 360, { duration: 500 });
  }, []);
 
  return (
    <TouchableOpacity onPress={animate}>
      <Animated.View
        style={{
          transform: [{ scale: scale.value }, { rotate: rotate.value + 'deg' }],
        }}
      >
        <Text>Press Me!</Text>
      </Animated.View>
    </TouchableOpacity>
  );
};
 
export default App;

这个例子展示了如何使用react-native-animation-hooks库中的useSharedValue和withTiming来创建一个简单的按压放大和旋转的动画。当用户点击屏幕时，视图会放大并旋转。这个例子简洁明了，并且教会了如何在React Native中使用动画钩子。

System

2024-08-14

所有,react native

react-native-lib-cus-com 是一个自定义组件库，它提供了一系列可复用的React Native组件，可以帮助开发者更快地构建应用界面。

要使用这个库，首先需要通过npm或yarn将其安装到你的React Native项目中：




npm install react-native-lib-cus-com
# 或者
yarn add react-native-lib-cus-com

安装完成后，你可以按照库的文档说明来使用其提供的组件。以下是一个简单的例子，展示如何在你的React Native应用中使用这个库中的一个组件：




import React from 'react';
import { View, Text } from 'react-native';
import { CustomButton } from 'react-native-lib-cus-com';
 
const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CustomButton
        title="点击我"
        onPress={() => alert('按钮被点击了！')}
      />
    </View>
  );
};
 
export default App;

在这个例子中，我们导入了CustomButton组件，并在应用的根视图中添加了一个按钮。当按钮被点击时，会弹出一个简单的警告框。这只是一个示例，实际使用时，你需要根据react-native-lib-cus-com库提供的文档来了解每个组件的具体使用方法和属性。

- 阅读更多 -

探索实时通信新纪元：React Native Agora SDK

System

2024-08-14

所有,react native




import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import RtcEngine, { RtcLocalView, RtcRemoteView, VideoRenderMode } from 'agora-react-native';
 
const App = () => {
  const [engine, setEngine] = useState(null);
  const [remoteUid, setRemoteUid] = useState(null);
 
  useEffect(() => {
    // 初始化 RtcEngine
    const engine = RtcEngine.create('你的Agora App ID');
    setEngine(engine);
    return () => {
      // 组件卸载时，确保调用销毁方法
      engine.destroy();
    };
  }, []);
 
  useEffect(() => {
    if (engine) {
      // 配置引擎并加入频道
      engine.setChannelProfile(1); // 1 表示直播模式
      engine.setClientRole(1); // 1 表示主播
      engine.joinChannel('token', '你的频道名称', null, 0).then(() => {
        // 加入频道成功
      }).catch(error => {
        // 处理错误
      });
    }
  }, [engine]);
 
  useEffect(() => {
    if (engine) {
      // 监听远端用户的变化
      engine.on('UserJoined', (uid, elapsed) => {
        setRemoteUid(uid);
      });
    }
  }, [engine]);
 
  return (
    <View style={styles.container}>
      {/* 本地视频流 */}
      <RtcLocalView.SurfaceView
        style={styles.localVideo}
        channelId="通道ID"
        renderMode={VideoRenderMode.Hidden}
      />
      {/* 远端视频流 */}
      {remoteUid && (
        <RtcRemoteView.SurfaceView
          style={styles.remoteVideo}
          channelId="通道ID"
          uid={remoteUid}
          renderMode={VideoRenderMode.Hidden}
        />
      )}
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  localVideo: {
    width: 100,
    height: 150,
  },
  remoteVideo: {
    width: 100,
    height: 150,
    position: 'absolute',
    top: 10,
    left: 10,
  },
});
 
export default App;

这段代码展示了如何在React Native应用程序中集成Agora SDK，实现视频通话的基本功能。它使用了Hooks API来管理状态，并包含了加入频道、监听用户加入等必要的Agora SDK调用。这个例子为开发者提供了一个简明的接入指南，并展示了如何在实际应用中使用Agora SDK。

System

2024-08-14

所有,react native




import React from 'react';
import { View, StyleSheet } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; 
import { ProgressBarIndeterminate } from 'react-native-indicators';
 
export default class LoadingIndicator extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ProgressBarIndeterminate
          color="#5382FA"
          animationDuration={1000}
          thickness={3}
        />
        <MaterialIcons
          name="refresh"
          size={32}
          color="#5382FA"
          style={styles.refreshIcon}
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  refreshIcon: {
    marginTop: 16,
  },
});

这段代码展示了如何在React Native应用中使用react-native-indicators库的ProgressBarIndeterminate组件来创建一个华丽的加载指示器，并且使用了@expo/vector-icons中的MaterialIcons图标来表示刷新动作。这个加载指示器是灵活的，可以通过样式调整来满足不同的设计需求。

- 阅读更多 -