我的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) 如何在ReactNavigation中为标题的后退箭头提供自定义导航?我希望标题中的后退箭头导航到我定义的屏幕,而不是上一个屏幕。
谢谢。
我正在尝试将该功能绑定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)
我也收到了警告:
我究竟做错了什么?
我想在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 …
我可以将图像上传到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) 如果我显示这样的图像它是有效的:
<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>输出为01或02.
如何显示名称为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)
如何设置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) 我创建了一个包含多个字段的表单,如输入类型名称,复选框和下拉列表.我的下拉代码:
<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形式.
谢谢.
我只是想知道如何调用函数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事件.
如何知道用户滚动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) react-native ×8
reactjs ×5
javascript ×2
tabnavigator ×2
amazon-s3 ×1
ffmpeg ×1
html ×1
multer ×1
multer-s3 ×1
native-base ×1
node.js ×1
php ×1