标签: react-native-component

背景

许多类似的问题似乎已经被问过（最值得注意的是 android google 地图在使用 GoogleMap.AnimateCamera() 时不加载地图以及How can I smooth pan a GoogleMap in Android?），但没有任何答案或评论发布这些线索让我对如何做到这一点有了坚定的想法。

我最初以为这会像调用一样简单animateCamera(CameraUpdateFactory.newLatLng(), duration, callback)，但就像上面第一个链接的OP一样，我得到的只是一个灰色或非常模糊的地图，直到动画完成，即使我将其放慢到几十秒长！

我设法找到并实现了这个帮助器类，它在允许图块沿途渲染方面做得很好，但即使延迟为 0，每个动画之间也存在明显的滞后。

代码

好的，是时候编写一些代码了。这是（稍作修改的）辅助类：

package com.coopmeisterfresh.googlemaps.NativeModules;

import android.os.Handler;

import com.google.android.gms.maps.CameraUpdate;
import com.google.android.gms.maps.GoogleMap;

import java.util.ArrayList;
import java.util.List;

public class CameraUpdateAnimator implements GoogleMap.OnCameraIdleListener {
    private final GoogleMap mMap;
    private final GoogleMap.OnCameraIdleListener mOnCameraIdleListener;

    private final List<Animation> cameraUpdates = new ArrayList<>();

    public CameraUpdateAnimator(GoogleMap map, GoogleMap.
        OnCameraIdleListener onCameraIdleListener) {
        mMap = map;
        mOnCameraIdleListener = onCameraIdleListener;
    }

    public void …

我已经在一个ReactNative项目上工作了一个星期，我想制作自己的Objc / Swift本机组件。

我遵循了官方文档，但是我发现并没有那么详细。我可以使用回调等，并且我也遵循此方法，但是找不到我想要的东西。

我想使用我的Class的构造函数init（），但是每次编译时，应用程序都会启动，并且Xcode会引发以下错误：

fatal error: use of unimplemented initializer 'init()' for class 'myProject.MyModule'

我已经尝试了很多事情，例如@objc在前面添加init()，但没有任何效果。我有点迷路了。

我的文件（我正在使用Swift 3）：

MyModule.m：

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(MyModule, NSObject)

RCT_EXTERN_METHOD(aMethod:(RCTResponseSenderBlock)callback)

@end

MyModule.swift：

import Foundation
@objc(MyModule)
class MyModule: NSObject {

  var myFirstString: String = ""

  init(myString: String) {

    self.myFirstString = myString

    super.init()
  }

  @objc func aMethod(_ callback: RCTResponseSenderBlock) -> Void {
    callback([NSNull(), self.myFirstString])
  }
}

MyModule-Bridging-Header.h：

#import <React/RCTBridgeModule.h>

堆：

• 反应本机
• 反应导航器
• 仅核心组件

我在 TabNavigator.tsx 上有这种风格：

const styles = StyleSheet.create({
  tabStyle: {
    backgroundColor: colors.background,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    height: 80,
    overflow: 'hidden',
    // position: 'absolute', // needed to ensure the bar has a transparent background in the corners
  },
})

我一直评论绝对位置，角落后面总是有背景，当另一种颜色的组件滚动时，它看起来很奇怪。

在这里，为了能见度，它以黄色着色：

如果我取消对绝对位置的注释，内容会在标签栏后面流动，使其感觉更自然。

但...

我需要在每个屏幕上添加一个底部边距来补偿选项卡占用的空间，或者底部的内容被隐藏。

我觉得应该有一个好的实践或已知的模式，也许是一个经过测试的解决方法，这会让我的生活更轻松。你有想法吗？

谢谢

我在我的应用程序中使用反应导航 v3，我在抽屉导航器中使用堆栈导航器，单击注销时我导航到登录屏幕并清除用户存储，但是每当我再次登录时，主要组件不会调用 componentWillMount 或 componentDidMount 方法，并在其上显示先前加载的数据。这是我的代码 >

const screens = {
  login: { screen: Login },
  dashboard: { screen: Dashboard },
  patientList:{screen:StackNav},
  headerComponent:HeaderComponent
 }

  const MyDrawerNavigator = createDrawerNavigator(
     screens,
      {
       initialRouteName: 'login',
      contentComponent: Sidebar
       }
     );

    App  = createAppContainer(MyDrawerNavigator);
    export default App;

堆栈导航 ==

export default createStackNavigator({
     PatientList,
     PatientDetails
 });

登出功能 ==

  localStorageService.removeAllKeys().then((res) => {
    this.props.navigation.navigate(route, { isLogin: 'N' })
  });

我有一个反应本机自定义输入组件，并且我成功地将其引用转发到父组件。现在，我还想引用子进程本身的输入，我该怎么做？

//my imports here

//my text field component
export const MyTextField = React.forwardRef((props, ref) => {

   const [inputValue, setValue] = useState('');

   const clearInput = () => {
      setValue("");
      //I want to get the input by ref here and apply "clear()" method on it
   }


   return (
      <View>
         <TextInput
            /*
             How can i also use this ref to refer to this textinput in The "clearInput" function above
             */
            ref={ref}
            value={inputValue}
            onChangeText={(value) => setValue(value)}
            {...props}
         />
         <IconButton
            icon="close-circle"
            onPress={clearInput}
         />
      </View>
   ); …

来自 reactjs 我期待图像组件上的“alt”属性，如果无法加载图像，它将显示文本。我在这里阅读了文档，我发现最接近的是 on error 事件。

React Native 图像组件中是否有等于 alt 的属性？如果我没有 alt 属性，用默认文本替换图像的最简单方法是什么？

嗨，我有以下课程，我试图从相机胶卷中获取照片并显示它。

class CameraRollProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
     images: []
    };
  }

  componentWillMount() {
    const fetchParams = {
      first: 25,
    };
    CameraRoll.getPhotos(fetchParams, this.storeImages, this.logImageError);
  }

  storeImages(data) {
    const assets = data.edges;
    const images = assets.map((asset) => asset.node.image);
    this.state.images =  images;
  }

  logImageError(err) {
    console.log(err);
  }

  render() {
      return (
        <ScrollView style={styles.container}>
          <View style={styles.imageGrid}>
            { this.state.images.map((image) => <Image style={styles.image} source={{ uri: image.uri }} />) }
          </View>          
        </ScrollView>
      );
  }
};

export default CameraRollProject;

问题是我的渲染函数在我的 CameraRoll.getPhotos 承诺得到解决之前被调用。所以我没有得到任何照片。

为了解决这个问题，我将我的程序改为以下 …

当 react native 多次需要这个原生 ui 组件时，从第二个开始，前一个变成黑色。

有任何想法吗？

@Override
public String getName()
{
    return "JWPlayer";
}


@Override
public JWPlayerView createViewInstance(ThemedReactContext context)
{
    PlayerConfig playerConfig = new PlayerConfig.Builder().build();

    playerView = new JWPlayerView(context.getCurrentActivity(), playerConfig);
    playerView.setFullscreen(false, false);
    playerView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

    playerView.addOnFullscreenListener(this);
    playerView.addOnPauseListener(this);
    playerView.addOnPlayListener(this);
    playerView.addOnSetupErrorListener(this);
    playerView.addOnErrorListener(this);



    return playerView;
}

I am using the NumericInput and it works fine when I run the application on my device.

However, when I run jest, I get all kind of errors:

TypeError: Cannot read property 'default' of undefined

  at new Icon (node_modules/react-native-vector-icons/lib/create-icon-set.js:42:389)
  at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3435:18)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6606:5)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7563:16)
  at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:12)
  at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:24)
  at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11349:7)
  at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12237:7)
  at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12149:7)
  at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12123:3)

and

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9036
The above error occurred in the <Icon> component:
    in Icon …

我在自定义组件中访问 onChangeText 时遇到问题。这是我的组件的代码：

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

type Props=
{
   style:any
   
}

const Input = (props:Props) =>
{
    return <TextInput {...props} style = {{...styles.input, ...props.style}} blurOnSubmit autoCorrect = {false} keyboardType = "number-pad" maxLength = {2} />
}

const styles = StyleSheet.create({
    
    input:{
        height:30,
        borderBottomColor: 'grey',
        borderBottomWidth: 1,
        marginVertical: 10
    }
        

})

export default Input;`

这是我正在使用的另一个文件中的代码部分：

 <Input style = {styles.input} onChangeText = {numberInputHandler} value = {enteredValue} />

OnChangeText 有下划线，错误是类型“IntrinsicAttributes & Props”上不存在属性“onChangeText”。我在教程中看到，在我的自定义组件中输入 {...props} 后，可以访问它的 props，但是家伙在 js 中编写，而我在 …