标签: react-native-android

borderRadius 在 iOS 中按预期工作，但在 Android 中不按预期工作。我试图包裹Image在一个视图，并给borderRadius和overFlow: 'hidden'

  <View style={styles.userImageContainer}>
    <Image source={require('../../assets/images/user1.png')}
    style={styles.userImage}
    />
  </View>

样式表

const imageSize = 40;

  userImageContainer: {
    height: imageSize,
    width: imageSize,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: imageSize/2,
    overflow: 'hidden'
  },
  userImage: {
    height: imageSize,
    width: imageSize,
    borderRadius: imageSize/2,
    padding: 5,
    resizeMode: 'contain'
  },

最终结果图像

我正在使用 RN 0.42.2

我正在尝试为我的react-native包安装这个包。https://www.npmjs.com/package/react-native-dialogs

我看到我需要执行此命令才能安装它。 rnpm install --save react-native-dialogs

我有node并npm安装在我的机器上。我不确定是什么rnpm。我收到一个错误。我试图通过一些链接，但没有运气。

'rnpm' 不是内部或外部命令，也不是可运行的程序或批处理文件。

我正在使用react-native-navigation启动一个包含谷歌地图的单屏应用程序，使用 - react-native-maps和一个左抽屉：

导航：

Navigation.startSingleScreenApp({
        screen: {
            screen : 'map.MapScreen',
            title : 'Map',
            navigatorStyle: {
                navBarHidden: true
            }
        },
        drawer : {
            left : {
                screen : 'drawer.DrawerScreen',
                passProps: {}
            },
            disableOpenGesture: true
        },
        animationType: 'slide-down',
        passProps: {}
    })

地图屏幕：

export default class MapScreen extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}>
                </MapView>
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center', …

• 我不知道如何通过 React Native 在后台获取接收消息（仅适用于 Android）

• 我只想在 Android 中接收最新消息然后显示在屏幕上

• 现在它只能在前台接收。

• 我遵循了 2 个链接，但仍然无法克服这个问题

https://www.npmjs.com/package/react-native-android-sms-listener

https://www.npmjs.com/package/react-native-background-job

这是我的代码

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View
} from 'react-native';

import BackgroundJob from 'react-native-background-job';
import SmsListener from 'react-native-android-sms-listener';

/*
Register background job with jobKey
*/
const myJobKey = 'Hej';

BackgroundJob.register({
  jobKey: myJobKey,
  job: () => console.log('Background Job fired!')
});

export default class ListenMessageApp extends Component {

  //constructor include last message
  constructor(props) {
    super(props);
    this.state = { lastMessage: 1 };
  } …

我正在尝试从名为 OpenWeatherMap 的服务获取数据作为 JSON，因此在我的 componentWillMount 方法中，我正在调用 fetch() 以通过 url 返回数据。我现在的代码是：

this.weather = fetch(url).then(response => response.json()).then(responseJson => responseJson);

它有效，但在 JSON 响应中返回奇数数据，我现在的 JSON 响应是：

{"_40":0,"_65":1,"_55":{here_the_correct_response}}

但我希望我的响应没有这些奇怪的下划线索引，只是纯 JSON 响应

我很清楚,对于本机本机模块,我们可以使用它@ReactMethod来导出一个方法并从JSX调用它,但是我们如何在react-native本机UI组件中做同样的事情呢？

在文档中我只看到@ReactProp被提及.如果@ReactMethod不起作用,如何从JSX访问我的本机UI组件的属性呢？(在iOS上,这可以在原生ui组件RCT_EXPORT_METHOD上完成,但在Android上是类似的可能吗？)

谢谢.

我在Windows 10和Ubuntu 16.04上尝试过它.在这两种情况下,Hot Reload仅适用于jsx中的更改,但不能用于更改javascript中的变量或函数或其他内容.热重新加载已启用.实时重新加载已禁用.当我在Visual Studio代码编辑器中保存更改时,虚拟设备(android studio)重新加载,但更改不存在.在EXPO App中的物理设备上也是如此.

首先,我没有安装守望者.Hot Relaod无法正常工作.安装后,Hot Reload也不能正常工作.

我使用create-react-native-app启动应用程序.它没有被驱逐出境.

的package.json:

{
  "name": "NativeReduxSaga",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "25.0.0",
    "react-native-debugger-open": "^0.3.17",
    "react-native-scripts": "1.11.1",
    "react-test-renderer": "16.2.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js",
    "postinstall": "rndebugger-open --expo"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@redux-offline/redux-offline": "^2.3.2",
    "expo": "^25.0.0",
    "prop-types": "^15.6.1",
    "react": "16.2.0",
    "react-native": "0.52.0",
    "react-native-autocomplete-input": "^3.5.0",
    "react-navigation": "^1.5.2",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2", …

我一直在尝试渲染背景图像，它运行了，但什么也没出现。我在 Windows 上通过 Android 运行它。这是下面的代码：

import React, { Component } from 'react';

import { View, Image, Text, ImageBackground } from 'react-native';

class Background extends Component {
    render() {
        return (
      <ImageBackground
        source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
        style={{flex: 1, width: '100%'}}

      >
        <View >
          <Text>Test</Text>
        </View>
      </ImageBackground>
        );
    }
  }

导出默认背景；

我不确定代码是否没有正确地拉取图像本身，或者是否需要调整样式。谢谢您的帮助！

我正在开发一个示例应用程序，在这个应用程序中需要使用 Arrow 卡来提供显示卡。我尝试过基于本机形状的反应，但我没有得到输出。

假设如果提供的文本自动增加，箭头设计形状也会增加

这是我的代码：

<View style={styles.container}>
                <View style={{ flex: 0.1, backgroundColor: "blue" }} />
                <View
                    style={{
                        flex: 0.9,
                        backgroundColor: "green",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    <View style={styles.baseTop} />
                    <View style={styles.baseBottom} />
                </View>
            </View>
baseTop: {
    borderBottomWidth: 35,
    borderBottomColor: "red",
    borderLeftWidth: 50,
    borderLeftColor: "transparent",
    borderRightWidth: 50,
    borderRightColor: "transparent",
    height: 0,
    width: 0,
    left: 0,
    top: -35,
    position: "absolute"
},
baseBottom: {
    backgroundColor: "red",
    height: 55,
    width: 100
}

这我需要像这种类型的图像，这是引用图像：

我正在尝试按照本地反应做.我在父视图中设置borderRadius.但孩子最重要的是.所以在最终视图中,borderRadius不可见

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1, borderRadius:30, backgroundColor:'red'}}>
        <View style={{flexGrow: 10, backgroundColor: 'powderblue'}} />
        <View style={{flexGrow: 20, backgroundColor: 'skyblue'}} />
        <View style={{flexGrow: 30, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

有什么我想要添加的吗？