标签: react-native-android

说请将方法附加到此组件

我是本机反应的新手,我正在尝试向我的 API 发送一些数据,基本上是一个 POST 请求,添加了一个按钮并尝试使用它来调用获取请求,但我不确定我做错了什么这个 ??它在日志中显示“请将方法附加到此组件”,如果我在这方面做错了什么,请告诉我?

这是我的按钮

<Button
        style={{height: 60,width:150}}
        onClick={ () => this.submitNewCustomer()}
        title="SUBMIT"
        backgroundColor='#C0C0C0'
        color="black"
        />
Run Code Online (Sandbox Code Playgroud)

这是我的方法

submitNewCustomer(){
fetch('http://endpoint.net/api/customerdetail', {
  method: 'POST',
  headers: new Headers({
            'Content-Type': 'application/json', // <-- Specifying the Content-Type
    }),
  body: JSON.stringify({
    CustomerId: '1ef87a90-a941-4ebb-b101-66f74ac07778',
    CustomerName: this.state.customername,
    UserId:'user2',
    VehicleCompanyName:this.state.vehiclecompanyname,
    VehicleModelType:this.state.vehiclemodeltype,
    VehicleNumber:this.state.vehiclenumber,
    CustomerImage:'',
    Location:'',
    CustomerImageType:'png'
  }), // <-- Post parameters
})
.then((response) => response.text())
.then((responseText) => {
  alert(responseText);
})
.catch((error) => {
    console.error(error);
});

}
Run Code Online (Sandbox Code Playgroud)

任何输入都会非常有帮助

fetch react-native react-native-android react-native-ios

5
推荐指数
1
解决办法
4333
查看次数

方向改变时的 Android Webview onHideCustomView

我遇到一个奇怪的问题。

我有一个应用程序,它有一个 webview 来显示一些文章。这些文章有文字、图片和视频,这个 webview 支持全屏播放视频。

这是 onShowCustomView 和 onHideCustomView 的代码。它运行良好,直到 Android 8.1。

@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
    if (mVideoView != null) {
        callback.onCustomViewHidden();
        return;
    }
    mVideoView = view;
    mCustomViewCallback = callback;
    view.setBackgroundColor(Color.BLACK);
    getRootView().addView(view, FULLSCREEN_LAYOUT_PARAMS);
    mWebView.setVisibility(View.GONE);
    // enable orientation change 
    setOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
}

@Override
public void onHideCustomView() {
    if (mVideoView == null) {
        return;
    }
    mVideoView.setVisibility(View.GONE);
    getRootView().removeView(mVideoView);
    mVideoView = null;
    mCustomViewCallback.onCustomViewHidden();
    mWebView.setVisibility(View.VISIBLE);
    // force portrait
    setOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
Run Code Online (Sandbox Code Playgroud)

在 AndroidManifest 中,活动如下所示:

 <activity
        android:name=".component.ArticleActivity"
        android:configChanges="orientation|screenSize"
        android:hardwareAccelerated="true"
        android:screenOrientation="portrait" />
Run Code Online (Sandbox Code Playgroud)

在 Android …

android webview react-native-android android-8.1-oreo

5
推荐指数
0
解决办法
538
查看次数

无法更改标签栏背景颜色

我在我的项目中使用 BottomTabNavigator 虽然我试图更改样式背景颜色,但我无法更改默认颜色的选项卡的颜色。以下是我正在使用的代码,即使色调也没有改变。我附上了页面的截图。我想更改图标所在栏的颜色。在此处输入图片说明.

{
      tabBarPosition: 'bottom',
      tabBarOptions: {
               activeTintColor: 'blue',
          inactiveTintColor: 'grey',
          style: {
            backgroundColor: 'darkcerulean',
            },
            labelStyle: {
              fontSize: 13,
          },

      }
}
Run Code Online (Sandbox Code Playgroud)

有人可以帮我吗?

提前致谢。

react-native react-native-android react-navigation

5
推荐指数
1
解决办法
7391
查看次数

使用 react-native-gesture-handler 将触摸事件传递给子视图

我正在使用这个React-Native-Gesture-Handler来处理我的手势用户在应用程序上所做的。

但是手势似乎没有按预期工作,或者某些功能似乎无法将手势事件传递给子视图

这里的传承

              <PanGestureHandler
            {...this.props}
            ref={this.panRef}
            onGestureEvent={this._onGestureEvent}
            onHandlerStateChange={this._onPanHandlerStateChange}>
            <Animated.View
                onLayout={this._onLayout}
                style={[this.props.style,
                this.props.windowSize,
                this.props.isFullScreen ? {} : {
                    transform: [
                        { translateX: this._translateX },
                        { translateY: this._translateY },
                    ],
               }]}>
                    <View style={styles.wrapper}>       ----> Child View
                        {this.props.children}
                    </View>
            </Animated.View>
        </PanGestureHandler>
Run Code Online (Sandbox Code Playgroud)

在这个例子中,整个视图被一个平移手势包裹着,这个平移手势用于在屏幕空间周围移动视图。

除了这个子视图之外,这里还将包含将具有一些平移手势实现的视图。如果此平移手势事件由于外部平移手势而被取消。

有没有办法正确获取内部子视图的平移手势事件?

我无法找到任何解决方案来将这些父手势事件传递给孩子并取消父手势操作。

如果您需要有关整个问题的更多信息......请询问。

gesture react-native react-native-android react-native-ios

5
推荐指数
0
解决办法
1064
查看次数

使用 POST 时不支持 Source.headers

在此处输入图片说明

我想用 webview 向我的后端发送一个 POST 请求。我怎么得到,但我得到了上述错误。

从文档:

" headers (object) - 与请求一起发送的额外 HTTP headers。在 Android 上,这只能与 GET 请求一起使用。"

我如何解决这个问题?

这是我的代码

const data = JSON.stringify({
  type: 'car',
  plate_number: 'c123'
});

return (
  <WebView
    source={{
      uri:'https://api-stg.caspian.id/user/vehicles/add',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: '54dc3c3c*******'
      },
      body: data
    }}
  />
);
Run Code Online (Sandbox Code Playgroud)

webview react-native react-native-android

5
推荐指数
1
解决办法
2386
查看次数

在 React Native 中正确使用 onChangeText

我是 React Native 的新手,我在使用 onChangeText 时遇到了问题。我正在尝试使用 TextInput 输入单词并更新状态。当我使用 onChangeText 时,我一次只能输入 1 个符号,直到它重新呈现。我可以通过使用保留值, value = {this.state.text}但每次写信时输入字段仍然失去焦点。

我也尝试过使用 onBlur 和 onSubmitEditing 但没有成功。

这是我目前的代码。这是在 render() 里面。

 <View style={{padding: 10}}>
   <TextInput
    onChangeText={(text) => { this.setState({text: text})} }
    />
    <TouchableHighlight style={styles.button} onPress={this.handlePress.bind(this)}>
         <Text style={styles.buttonText}>Login</Text>
       </TouchableHighlight>
            <Text style={{padding: 10, fontSize: 42}}>
      {this.state.text}
    </Text>
  </View>
Run Code Online (Sandbox Code Playgroud)

因此,通过使用这种方法,我目前一次只能写一个字母,因为 this.state.text 一次只能包含一个字母。

任何帮助表示赞赏。

例子

解决了

我使用 react-native-tab-view 使用它自己的路由器。我的代码是这样写的 ,正如你所看到的,渲染部分发生在 return() 之外。这就是导致我的问题的原因。我已经删除了 react-native-tab-view 并像这样重写了它

reactjs react-native react-native-android

5
推荐指数
1
解决办法
9658
查看次数

React Native localeCompare 不适用于 Android

我正在尝试按字母顺序对我的数组进行排序。

myArray.sort(function(a, b){
    return a.title.localeCompare(b.title ,'tr');
  })
Run Code Online (Sandbox Code Playgroud)

myArray 包括土耳其语字符,如 'ç,?,ü,ö,?'。我的代码在 ios 上可以正常工作,但在 android 上却无法按照我想要的方式工作。它按字母顺序排序,但以土耳其语字符开头的单词位于列表底部。

javascript reactjs react-native react-native-android

5
推荐指数
2
解决办法
1306
查看次数

如何增加 react-native Slider 组件的高度?

我正在做一个 react native 项目......我的一个案例我需要在 react-native 中使用 Slider 组件。

<Slider 
  minimumTrackTintColor='blue'
  maximumTrackTintColor='red'
  width={300}
  value={16}
  minimumValue ={0}
  maximumValue={100}
/>
Run Code Online (Sandbox Code Playgroud)

我可以控制 Slider 组件的宽度,但我需要增加 Slider 的高度。有什么建议吗?

reactjs react-native react-native-android

5
推荐指数
1
解决办法
2507
查看次数

将活动结果传递到本机模块中

我正在尝试使用 react native 对文本进行一些语音识别。我写了一个反应模块来启动识别器意图

public class SpeechToTextModule extends ReactContextBaseJavaModule {

...

  @ReactMethod
  public void startListening(Callback errorCallback, Callback successCallback) {

    Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
    intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL,
            RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);

    if(getCurrentActivity() != null){
        getReactApplicationContext().startActivityForResult(intent, SPEECH_REQUEST_CODE, null);
    } else {
        errorCallback.invoke(new NullPointerException("Activity is null"));
    }
}

  public void onActivityResult(int requestCode, int resultCode, Intent data){
    // control must come here
  }
Run Code Online (Sandbox Code Playgroud)

主要活动如下所示:

public class MainActivity extends ReactActivity {

  ...

  @Override
  public void onActivityResult(int requestCode, int resultCode, Intent data) {
    // how do i invoke the module …
Run Code Online (Sandbox Code Playgroud)

android react-native react-native-android

5
推荐指数
1
解决办法
3801
查看次数

如何在 React Native 中的应用程序启动器图标上显示通知计数?

有没有办法在 React Native 中的应用启动器图标上显示图标计数?

我正在使用 "expo": "29.0.0", "react": "16.3.1", "react-native": "29.0.0"

喜欢这张图

react-native react-native-android react-native-ios

5
推荐指数
1
解决办法
3899
查看次数