小编den*_*emm的帖子

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import  createHistory  from 'history/createBrowserHistory';
import { Provider } from 'react-redux';
import  ConnectedRouter  from 'react-router-redux';
import { Route, Switch } from 'react-router';
import Home from "./pages/Home";
import Register from "./pages/Register";
import CourseManagerDashboard from "./pages/CourseManagerDashboard";
import CourseDetail from "./pages/CourseDetail";
import App from './app/App';
import LoginForm from './components/LoginForm';

const store = createStore(
    state => state
);
const history = createHistory();

ReactDOM.render((
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <Route name="home" exact …

我想在一些网络调用完成后在运行时设置上下文(只有那时我知道需要在我的应用程序中访问的值),但我不知道如何保持这个值.

我可以像这样更新上下文值:

<NetworkVersion.Provider value={{version: this.state.version}}>

我可以在哪里使用组件的状态.这种方法取自官方的React文档.

但我很惊讶地发现此Provider的其他使用者获得了在React.createContext()调用中初始化的默认值(空对象).有没有办法在运行时更新Context并在应用程序的生命周期内保留该值？

我正在尝试从项目列表中在React Native中进行两列布局.如果我定义项目的宽度似乎只能工作,我想只定义父宽度的百分比(0.5将产生2列布局,但0.25将产生4列1).可以这样做吗？

export default class App extends Component {
  render() {
    return (
      <View style={[styles.container, {width:width}]}>
        <View style={styles.item}><Text>{'item1'}</Text></View>
        <View style={styles.item}><Text>{'item2'}</Text></View>
        <View style={styles.item}><Text>{'item3'}</Text></View>
        <View style={styles.item}><Text>{'item4'}</Text></View>
        <View style={styles.item}><Text>{'item4'}</Text></View>
        <View style={styles.item}><Text>{'item5'}</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  item :{
    flex: 0.5, //why this doesnt work???
    // width: 150, //using fixed item width instead of flex: 0.5 works
    height: 100,
    padding: 10,
    backgroundColor: 'red',
    // flexGrow: 1,
    // flexShrink: 0,
  }
});

你可以在这里玩它: …

我有一个工作的反应本机应用程序，我想通过添加一个显示WebView. 在这里，用户将能够看到他们的个人资料信息，因此我需要能够对每个用户进行身份验证。

我认为这不会很难实现，因为用户已经在应用程序中进行了身份验证，但显然不可能将自定义标头添加到react-native 中的WebView 中。社区组件react-native-webview也是如此。所以我无法在请求上设置授权令牌。

这使身份验证过程变得复杂，因此我正在寻找一种替代方法在 WebView 中进行身份验证。令我惊讶的是，网络上没有太多关于如何执行此操作的信息。那么在 React Native 中处理身份验证的好方法是什么WebView？

错误:看起来应用程序没有访问位置的权限.将以下行添加到应用程序的AndroidManifest.xml中

即使我在manifest.xml中添加了权限并要求运行时权限,我也无法访问GPS.

我的AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.location">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
.....
.....

完整代码:

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

export default class App extends Component {
  async requestLocationPermission() {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          'title': 'Location Access Permission',
          'message': 'Expensify would like to use your location ' +
                     'so you we track you.'
        }
      )
      if (granted …

我的应用程序使用 react-navigation 库进行路由，但现在我有一个要求，我只想在属于 TabNavigator 的路由上显示模式窗口。我认为如果我创建了一个高阶组件并使用它来包装 TabNavigator，这会起作用，但这似乎不起作用。

那么将功能添加到 react-navigation Navigator 的正确方法是什么？

TabRoutes.js

这在没有提供程序的情况下工作正常，但是一旦我将提供程序添加到 TabNavigator，路由就无法访问。

import myProvider from './providers/myProvider';

const TabRoutes = createBottomTabNavigator({
  Main: {screen: HomeStack},
  Moments: {screen: MomentStack},
  Settings: {screen: SettingsRoutes}
},{
  initialRouteName: 'Main'
});

export default myProvider(TabRoutes);

路由.js

TabNavigator 是 SwitchNavigator 的一部分，但只有选项卡的路由才能显示模态。

import TabRoutes from './routes/TabRoutes';

const AppRoutes = createSwitchNavigator({
  Loading: LoadingScreen,
  Auth: AuthStack,
  App: TabRoutes,
}, {
  initialRouteName: 'Loading'
});

myProvider.js

const myProvider = (wrappedComponent) => {

  class extends React.Component {
    render (
      <View>
        <WrappedComponent {...this.props}>
        <MyModal visible={...}>
          ... …

我对 React Native 很陌生。我将在这里分享我的代码 App.js

import React, {Component} from 'react';
import Routes from './src/Routes';

export default class App extends Component {

  render() {
    return (
      <Routes />
    );
  }
}

索引.js

import React, { Component } from 'react';
import { AppRegistry, Dimensions } from 'react-native';
import { createDrawerNavigator } from 'react-navigation';
import App from './App';
import {name as appName} from './app.json';
import SideMenu from './src/SideMenu'
import Routes from './src/Routes';

const drawernav = createDrawerNavigator({
  Item1: {
      screen: Routes,
    }
  }, { …

我有一个与自定义 iOS 类通信的 React Native 组件，因此我使用 NativeModules en NativeEventEmitter 向本机代码发送命令和从本机代码接收命令。

import {NativeModules, NativeEventEmitter} from 'react-native';

/* inside the constructor I do some setup: */
const { NetworkManager } = NativeModules;
const emitter = new NativeEventEmitter(NetworkManager);


/* here I subscribe to an event from the emitter */
public startDiscovery() {

  const deviceFoundSubscription = this._emitter.addListener(
    "DeviceDiscovered",
    (device) => this.deviceFound(device)
  );
  this.NetworkManager.startDiscovery();
}

这段代码工作得很好，但现在我想用 Jest 编写一些测试，这就是我被卡住的地方。我将如何继续为事件侦听器编写测试？我想在 Jest 测试中模拟 DeviceDiscovered 事件，然后断言调用了侦听器。

我正在使用React-Native-View-Shot 库来截取整个屏幕的屏幕截图。

文档中提到方法 captureScreen()：

captureScreen() 将捕获当前显示屏幕的内容作为本机硬件屏幕截图。它不需要 ref 输入，因为它在视图级别不起作用。这意味着 ScrollView 不会被完整捕获 - 仅捕获用户当前可见的部分。

但是，屏幕截图未捕获除相机预览之外的任何组件。所使用的所有组件均声称受文档互操作性表中的支持。

代码：

takeScreenshot() {
    captureScreen({
        format: "jpg",
        quality: 0.8
    }).then(
        uri => { savePath = uri; console.log("Image saved to", uri); CameraRoll.saveToCameraRoll(uri); ToastAndroid.show(uri + "", ToastAndroid.SHORT); },
        error => console.error("Oops, snapshot failed", error)
        );
}

render() {
    return (
        <View style={styles.container}>
            <Text style={{backgroundColor:"white"}}>Hello World</Text>
            <RNCamera style={styles.preview}
                ref={ref => {
                    this.camera = ref;
                }}
                type={RNCamera.Constants.Type.back}
                flashMode={RNCamera.Constants.FlashMode.on}
                permissionDialogTitle={'Permission to use camera'}
                permissionDialogMessage={'We need your permission to use your camera …

我正在尝试使用 Detox 为我的 React Native 应用程序打开一个特定页面。在以下方法中传递深层链接时，在Android中，它会提示选择 my app 或Chrome。有没有办法让我的应用程序成为 Detox 中这些链接的默认应用程序？我已经尝试过这两个

await device.openURL({url: '{{URL}}'

并且

await device.launchApp({
  url: '{{URL}}',
  newInstance: false
})

我的应用程序中有多个屏幕，我使用 CreatStackNavigator 进行导航。如果我第二次访问屏幕，则不会调用构造函数。

假设我有四个屏幕 A、B、C 和 D，目前我在 A。

然后我分别转到C和D屏幕。

现在，如果我再次单击 C，则不会调用 C 的构造函数。

我也使用了 ComponentReceivedMount() 但它没有用。

我的代码是：-

  constructor(props) {
    super(props);
    ToastAndroid.show('heeeelll', ToastAndroid.LONG);
    this.state = {
        drawerOpen: false,
        op: 1,
        cl: '#ffffff',
        swiper: this.renderSwpier,
        showSwiper: false,
        ftc: '#2c3554',
        stc: '#c8c8c8',
        firstTopcolor: 1,
        secondTopColor: 0,
        showview: true,
    }
}

先感谢您。

在 React Native 中，我需要从一个屏幕导航到另一个屏幕。但我不明白这个概念。所以，我做了如下，

在 App.js 中

import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {StyleSheet, Text, Alert, View} from 'react-native';
import { Container, Header, Content, Button} from 'native-base';
import { createStackNavigator, createAppContainer } from 'react-navigation';


type Props = {};
export default class App extends Component<Props> {
ShowAlertDialog = () =>{

Alert.alert(

  // This is Alert Dialog Title
  'Lopels',

  // This is Alert Dialog Message. 
  'Welcome to Lopels',
  [
    // First Text Button in Alert Dialog.
    {text: 'Ask …