标签: react-native-android

React Native TextInput setState() 隐藏键盘

请查看小吃链接, https ://snack.expo.io/@banid/textinput 过滤器视图上的 TextInput(在按下按钮时显示)会在我调用 setState() 时隐藏键盘。我调用 setState 来更新 TextInput 的值。由于这个原因,我无法在 TextInput 上连续输入。这是一个错误还是我做错了什么?谢谢

react-native react-native-android

2
推荐指数
1
解决办法
1566
查看次数

React Native 如何在启动画面上设置 Gif 图像?

我创建了新的 React Native 移动应用程序,我需要将 gif 图像设置为初始屏幕。任何示例或源代码都可以帮助我做到这一点。

render() {
    return (
      <View style={styles.container}>
        {/*<BackgroundImage source={Images.splashScreen}*/}
        {/*       style = {{width: 315, height: 383}} />*/}

        <Image
            style={{width: 300, height: 200}}
            source={{uri: 'http://gifsstore.com/public/upload/gifs/15609427721560942769.gif'}} />
      </View>
    );
  }
Run Code Online (Sandbox Code Playgroud)

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

2
推荐指数
1
解决办法
6108
查看次数

React Native 使用不同的 props 导航到同一页面

我正在开发一个使用侧抽屉的 RN 应用程序。(RN 版本:0.59.8)

const DrawerNavigator = createDrawerNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Poems: {
            screen: PoemsScreen
        },
        Contest: {
            screen: ContestScreen
        },
        AboutMe: {
            screen: AboutMeScreen
        }
    },
    DrawerConfig
);

export default createAppContainer(DrawerNavigator);
Run Code Online (Sandbox Code Playgroud)

使用的 react-navigation 版本是 3.11.0。在菜单中,多个子项指向同一个页面,即 ViewPager,但具有不同的参数(页面索引)。问题是以下方法都不起作用:

  1. 尝试使用推送而不是导航(返回_this2.props.navigation.push is not a function)
  2. 试图重置相应的堆栈。
const resetAction = StackActions.reset({
   index: 0,
   key: 'Poems',
   actions: [NavigationActions.navigate({ routeName: 'Poems' })]
})
this.props.navigation.dispatch(resetAction)
Run Code Online (Sandbox Code Playgroud)

(也试过key: null)

任何帮助深表感谢!

react-native react-native-android react-navigation react-navigation-drawer

2
推荐指数
1
解决办法
4837
查看次数

React-native 中的 BoxShadow

我正在尝试在 react-native 版本 0.59.9 中围绕视图创建一个框阴影

我已经尝试过 'shadowOffSet' 和所有的阴影属性,但没有用

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

const styles = {
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
    },
}

export default class Card extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{
            borderWidth: 1,
            borderRadius: 20,
            borderColor: '#ddd',
            borderBottomWidth: 0,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.8,
            shadowRadius: 20,
            borderWidth: (1 / PixelRatio.getPixelSizeForLayoutSize(1)), …
Run Code Online (Sandbox Code Playgroud)

react-native react-native-android

2
推荐指数
1
解决办法
1万
查看次数

borderRadius 未应用于 FlatList

我有一个 FlatList,每当有人在 TextInput 中输入文本时就会显示它。我面临的问题是 borderRadius 应用于 iOS,但不适用于 Android(请参阅我的意思https://gitlab.com/narcis11/jobzy/uploads/2377b0617461a1ce35e3ae249b28c93c/rounded-edges.png)。屏幕截图来自运行 API 28 的 Google Pixel 模拟器。

我在 Expo 33 上运行,它基于 React Native 0.59.8。

我尝试了以下方法:

  1. 将 borderRadius={6} 设置为 FlatList 中的参数,而不是样式(例如 .
  2. 将 FlatList 包含在视图中并将 style={{borderRadius: 6, overflow: 'hidden'}} 应用于视图
  3. 将 style={{borderRadius: 6, overflow: 'hidden'}} 设置为包含 FlatList 和其他 UI 元素的 ImageBackground
  4. 将 borderBottomLeftRadius、borderBottomRightRadius、borderTopLeftRadius、borderTopRightRadius 设置为 6。

不用说,这些解决方案都没有解决我的问题。

这是我的 FlatList,它位于 ImageBackground 中:

<ImageBackground style={styles.bkgImage} source={require('../assets    /homepage_background.jpg')}>
        <Text style={styles.header}>{i18n.t('appName')}</Text>
        <Text style={styles.descText}>{i18n.t('homepage.header1')}{'\n'}{i18n.t('homepage.header2')}</Text>
        <TextInput 
            style={styles.jobTextInput}
            value={this.state.jobInputValue}
            placeholder={i18n.t('homepage.jobInput')}
            onChangeText={(jobInputValue) => this.setState({jobInputValue}, this.checkJobsDropdown(jobInputValue))}/>
                <FlatList
                data={this.state.jobsList}
                style={this.state.showJobsDropdown ? styles.jobsDropdownStyle : …
Run Code Online (Sandbox Code Playgroud)

react-native react-native-android

2
推荐指数
1
解决办法
2487
查看次数

如何使用 React Native 启用 Proguard?

我想减少我的 APK 大小我遵循了这些https://facebook.github.io/react-native/docs/signed-apk-android
并运行 ./gradlew bundleRelease 而不是 assembleRelease 但我有错误

任务“:app:transformClassesAndResourcesWithProguardForRelease”执行失败。作业失败,

那么我该如何解决它,我是谷歌,但问题仍然存在!但是如果没有启用 Proguard,它的工作非常好,我得到了 (Aab & .Apk) SO 如何解决它!

我认为这个文件有问题,但我不知道如何配置它!

proguard-rules.pro


# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
#   public *;
#}

Run Code Online (Sandbox Code Playgroud)

包.json

{
  "name": "APP_NAME",
  "version": "1.12.3",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.4.2",
    "@turf/distance": "^6.0.1",
    "@turf/helpers": "^6.1.4",
    "@turf/invariant": "^6.1.2", …
Run Code Online (Sandbox Code Playgroud)

javascript android react-native react-native-android

2
推荐指数
1
解决办法
8553
查看次数

java.lang.RuntimeException: 无法启动“jarsigner”进程,请将其添加到 PATH

当我运行 ./gradlew bundleRelease 时,我多次遇到这样的错误

java.lang.RuntimeException: 无法启动“jarsigner”进程,请将其添加到 PATH

我在运行 99% 时发现它

android release gradlew react-native react-native-android

2
推荐指数
1
解决办法
591
查看次数

在 React-Native 中使用粗箭头函数更改 React.Component

是否可以仅使用粗箭头函数在其他 React.Component 上渲染 React.Component,在我的情况下使用 state 似乎没有必要,因为不需要关闭打开的组件。我试图实现在其他 React.Component 上渲染 React.Component 的最简单方法。

我正在尝试这样做:

<Button onPress={() => { return (<ShowOtherReactComponent/>); }} >Show OtherComponent</Button>
Run Code Online (Sandbox Code Playgroud)

这是调用<ShowOtherReactComponent/>我知道的,因为我从 constructor 但是调用了一个警报函数!什么都没有渲染。这是为什么?我怎样才能做到这一点?

PS:这种方法可能是错误的,但仍然想看看它是如何做到的。为科学。

javascript reactjs react-native react-native-android

2
推荐指数
1
解决办法
497
查看次数

错误:ENOENT:没有那个文件或目录,打开'android\app\src\main\assets\index.android.bundle'

我创建了 react-native init 项目

然后我使用 react-native run-android 运行该项目,它将毫无问题地运行。

当我尝试使用以下评论构建 apk 时

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src /主要/资源

我正面临这个错误

错误ENOENT:没有这样的文件或目录,打开'android\app\src\main\assets\index.android.bundle'。使用 --verbose 标志运行 CLI 以获取更多详细信息。错误:ENOENT:没有那个文件或目录,打开'android\app\src\main\asset\index.android.bundle'

react-native react-native-android signed-apk metro-bundler

2
推荐指数
1
解决办法
4623
查看次数

如何在反应导航中有条件地隐藏 Tab?

如果用户登录,我想有条件地隐藏我的选项卡之一,

所以我有 5 个选项卡如果用户登录\注册我从 redux 商店得到一个布尔值,如果这个用户登录我想如何“库选项卡”如果没有登录,我不想与其他人一起显示这个选项卡“库”只需在应用程序中保留 4 个标签

代码

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

let {isLogin} = store.getState().user;


const TabHome = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      },
    },
    Browse: {
      screen: Browse,
      navigationOptions: {
        tabBarLabel: 'Browse',
      },
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: 'Search',
        headerShown: false,
      },
    },
    Radio: {
      screen: Radio,
      navigationOptions: {
        tabBarLabel: 'Radio',
      },
    },
    Library: isLogin ? (
      {
        screen: YourLibrary,
        navigationOptions: {
          tabBarLabel: 'Library',
        }, …
Run Code Online (Sandbox Code Playgroud)

javascript react-native react-native-android react-navigation

2
推荐指数
1
解决办法
2728
查看次数