小编Som*_*ame的帖子

如何在StackNavigator中将参数传递给屏幕?

我的React Native代码:

import React, { Component } from 'react';
import { AppRegistry, ActivityIndicator, StyleSheet, ListView, 
  Text, Button, TouchableHighlight, View } from 'react-native';

import { StackNavigator } from 'react-navigation';
import DetailsPage from './src/screens/DetailsPage';

class HomeScreen extends React.Component {

   constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      userDataSource: ds,
    };
  }

  componentDidMount(){
      this.fetchUsers();
  }

    fetchUsers(){

        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response) => response.json())
            .then((response) => {
                this.setState({
                    userDataSource: this.state.userDataSource.cloneWithRows(response)
                });
            });
    }

    onPress(user){
        this.props.navigator.push({
            id: 'DetailPage'
        }); …
Run Code Online (Sandbox Code Playgroud)

react-native react-navigation

27
推荐指数
3
解决办法
5万
查看次数

自定义后退导航,用于反应导航后退按钮

如何在ReactNavigation中为标题的后退箭头提供自定义导航?我希望标题中的后退箭头导航到我定义的屏幕,而不是上一个屏幕。

谢谢。

reactjs react-native react-navigation

9
推荐指数
2
解决办法
7726
查看次数

React-Native Button onPress不工作

我正在尝试将该功能绑定handleClick到我的按钮onPress.但它不起作用.当我刷新页面时,我在没有点击按钮的情况下收到警报,在我关闭警报并单击按钮后,没有任何反应.

我的代码是:

class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }

  handleClick(){
    alert('Button clicked!');
  }

    render(){
      return(
        <View>
          <Button
           onPress={this.handleClick()}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}
Run Code Online (Sandbox Code Playgroud)

我也收到了警告:

在此输入图像描述

我究竟做错了什么?

javascript reactjs react-native

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

在Scroll上隐藏TabNavigators和Header

我想在Scroll上隐藏Header和TabNavigator选项卡.我怎么做?我想隐藏它们在Scroll上并在ScrollUp上显示它们.我的代码:

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

class ScrollTest extends Component {

    render(){
    const { params } = this.props.navigation.state;

        return(
            <View style={styles.container}>

               <ScrollView>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
               </ScrollView>

            </View>
        )
    }
}
const styles = StyleSheet.create({
  container:{
    flex:1, padding:5 
  },
  newView:{
     height: 200, backgroundColor:'green', margin:10
  }
})
export default ScrollTest;
Run Code Online (Sandbox Code Playgroud)

我检查了Animated API的这个链接,但是无法弄清楚如何在onScoll中实现它?

在此输入图像描述

所以标题HomeScreen和选项卡Tab1 …

tabnavigator react-native react-navigation

7
推荐指数
1
解决办法
5870
查看次数

如何从multer访问上传的文件?

我可以将图像上传到S3. 现在,如果选择的文件是.gif,我希望能够将.gif文件转换为 并将转换后的文件.mp4上传到S3. 仅当我提供文件路径时,我才能将 a 转换.gif.mp4with ffmpeg。我如何访问上传的文件Multer?下面是我的代码:

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var aws = require('aws-sdk');
var multer = require('multer');
var multerS3 = require('multer-s3');
var s3 = new aws.S3();
var ffmpeg = require('fluent-ffmpeg');


var upload = multer({
    storage: multerS3({
        s3: s3,
        bucket: 'myBucket',
        key: function (req, file, cb) {
            console.log(file);
            var extension = file.originalname.substring(file.originalname.lastIndexOf('.')+1).toLowerCase();

                if(extension=="gif"){
                console.log("Uploaded …
Run Code Online (Sandbox Code Playgroud)

ffmpeg amazon-s3 node.js multer multer-s3

6
推荐指数
1
解决办法
9652
查看次数

在React-Native NativeBase中显示本地图像

如果我显示这样的图像它是有效的:

<Thumbnail source= {require('../images/01.jpg')} />
Run Code Online (Sandbox Code Playgroud)

但失败了:

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />
Run Code Online (Sandbox Code Playgroud)

person.id来自一系列的people.将其打印<Text>{person.id}</Text>输出为0102.

如何显示名称为prop.value的本地图像?

我试过了:

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />
Run Code Online (Sandbox Code Playgroud)

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />
Run Code Online (Sandbox Code Playgroud)

两者都失败并出现错误:未命名的命名模块:'../ images/.jpg' 在此输入图像描述

reactjs react-native native-base

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

TabNavigator额外填充

如何设置TabNavigator标签的高度和填充样式?我正在执行以下操作:

import Icon from "react-native-vector-icons/MaterialIcons";
const tabNav = TabNavigator({
  TabItem1: {
      screen: MainScreen,
      navigationOptions: {
          tabBarLabel:"Home",
          tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={20} color={tintColor} />
      }
    },
    TabItem2: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Home",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={30} color={tintColor}  />
      }
    },
    TabItem3: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Browse",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} color={tintColor} />
      }
    }
}, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        activeTintColor: '#222',
        activeBackgroundColor :'yellow',  //Doesn't work
        showIcon: true,
        tabStyle: …
Run Code Online (Sandbox Code Playgroud)

tabnavigator react-native react-navigation

4
推荐指数
2
解决办法
8689
查看次数

获取php中bootstrap下拉列表的值

我创建了一个包含多个字段的表单,如输入类型名称,复选框和下拉列表.我的下拉代码:

<div class="container">
<form action="selecttest.php" method="post">
<div class="dropdown">
<div class="dropdown-toggle somename1" data-toggle="dropdown"id="menu1"></div>
  <ul class="dropdown-menu myclass numberom1" aria-labelledby="menu1" name="thenumbers">
      <li value="one">One</li>
      <li value="two">Two</li>
      <li value="three">Three</li>
      <li value="four">Four</li>
      <li value="five">Five</li>
  </ul>

</div>
<input type="submit" name ="submit"/>
Run Code Online (Sandbox Code Playgroud)

我想<li>在selecttest.php中获取所选的值.以下代码无效:

$val = $_POST["thenumbers"];
    echo "the Value selected is ".$val;
Run Code Online (Sandbox Code Playgroud)

如何在php页面中获取下拉列表的值?如上所述,表单中还有其他元素,因此我无法使用jquery onclick事件.这是一种非ajax形式.

谢谢.

html php twitter-bootstrap

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

调用函数onPress React Native

我只是想知道如何调用函数onPress.我设置了这样的代码:

export default class Tab3 extends Component {
    constructor(props) {
        super(props);
        this.state = {myColor: "green"};
    }

    handleClick = () => {
        if (this.state.color === 'green'){
           this.setState({myColor: 'blue'});
        } else {
           this.setState({myColor: 'green'});
        }
    }

    render() {
     return(
      <View>
           <Icon
            name='heart'
            color={this.state.myColor}
            size= {45}
            style={{marginLeft:40}}
            onPress={() => handleClick(this)}                                 
            />
      </View>
      )};
Run Code Online (Sandbox Code Playgroud)

但是当我尝试这个时,我会收到错误 can't find variable handleClick

请帮忙.我只想知道如何将函数绑定到click事件.

javascript reactjs react-native

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

试图找到滚动的方向

如何知道用户滚动ScrollView. 我想根据方向显示一个动作按钮。我正在尝试使用以下代码找到方向:

import React, {Component} from 'react'

import { StyleSheet, Alert, ScrollView, View, Text } from 'react-native' 

class ScrollDirection extends Component {
  constructor(props){
    super(props);
    this.state = {
      offset: 0
    }
  }

  onScroll(event){
    var currentOffset = event.nativeEvent.contentOffset.y;
    var direction = currentOffset > this.offset ? 'down' : 'up';
    this.state.offset = currentOffset;
    Alert.alert(direction);
  }


  render() {
    return (
      <View style={styles.container}>        
        <ScrollView onScroll={this.onScroll}>
          <View style={styles.scroller}>
           <Text style={{fontSize:20,}}>ScrollDirection</Text>
          </View> 
        </ScrollView>
      </View>
    )
  }

}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: …
Run Code Online (Sandbox Code Playgroud)

reactjs react-native react-native-scrollview

3
推荐指数
2
解决办法
5828
查看次数