小编Rob*_* IV的帖子

显示:React Native中的内联等效

好像我在创建显示器时遇到了问题:与flexbox等效的内联样式.到目前为止,我已经实现了以下功能(红色和蓝色线由边框功能控制,以帮助设置样式):

给出代码的当前布局

使用此代码:

var React = require('react-native');
var {
    View, 
    ScrollView, 
    Image,
    StyleSheet,
    Text, 
    TouchableHighlight,
} = React;

//additional libraries
var Parse = require('parse/react-native'); //parse for data storage
Icon = require('react-native-vector-icons/Ionicons'); //vector icons

//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');

//dynamic variable components
var ImageButton = require('../common/imageButton');
//var KeywordBox = require('./onboarding/keyword-box');

module.exports = React.createClass({
    render: function() {
        return (
            <View style={[styles.container]}>
                <Image 
                    style={styles.bg} 
                    source={require('./img/login_bg1_3x.png')}>
                    <View style={[styles.header, this.border('red')]}>
                        <View style={[styles.headerWrapper]} >
                            <Image 
                                resizeMode={'contain'}
                                style={[styles.onboardMsg]}
                                source={require('./img/onboard_msg.png')} >
                            </Image>
                        </View>
                    </View>
                    <View …
Run Code Online (Sandbox Code Playgroud)

css flexbox react-native

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

更改按钮颜色onPress(切换功能)React Native

希望一切安好.

我似乎在使用基本按钮功能时遇到了困难.我需要的只是要更改的类的状态以及每次按下按钮时要更改的按钮样式.与TouchableHighlight不同,我需要将颜色更改保持到再次按下按钮(返回原始颜色).

我曾尝试使用SwitchIOS但它似乎不容易设计成圆形按钮,因此并没有真正解决.我是一个新手,所以仍然在学习,非常感谢你的帮助.这是我到目前为止:

'use strict';

var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var Icon = require('react-native-vector-icons/FontAwesome');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  Image, 
  TouchableHighlight,
  TextInput,
} = React;


class LS1 extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      paleo: false, 
      vegan: false, 
      vegetarian: false, 
      nutfree: false, 
      dairyfree: false, 
      healthy: false,
      glutenfree: false,
    }
  }

  SkipLogin() {
    var num = window.height/8.335;
    console.log(num);
  }

  render() {
    return (
      <View style={styles.container}>
        <Image source={require('image!LS1')} style={styles.bgImage}>
          <Text style={styles.icontext}>Help us get …
Run Code Online (Sandbox Code Playgroud)

javascript user-interface button react-native

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

具有变暗不透明度的文本叠加图像反应原生

我试图在图像上叠加标题 - 图像以较低的不透明度变暗.但是,不透明效果也会改变叠加文本 - 使其变暗.有什么解决方法吗?这是看起来像:

在此输入图像描述

这是我的自定义组件的代码(文章预览 - 上面的图像是一行文章预览组件):

//component for article preview touchable image
/* will require the following
- rss feed and api
- user's keyword interests from parse In home.js
- parse db needs to be augmented to include what they heart
- parse db needs to be augmented to include what they press on (like google news)
*/
var React = require('react-native');
var {
  View, 
  StyleSheet, 
  Text, 
  Image, 
  TouchableHighlight, 
} = React;

//dimensions
var Dimensions = require('Dimensions'); …
Run Code Online (Sandbox Code Playgroud)

javascript overlay image opacity react-native

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

如何在本机中添加浮动工具提示?

我正在开发一个应用程序,在进入应用程序的主页面之前(初始注册后)让用户通过一个简短的游览.我想做的是使用以下设计覆盖应用页面(通过标签栏看到):

在此输入图像描述

然而,React Native Overlay有一段历史,它遗留了很多错误 - 它也没有为我个人工作过.React Native ToolTip模块不再受支持,也不起作用.有没有人做过这个?如果是这样,怎么样?感谢您的意见!

overlay instructions ios react-native

18
推荐指数
1
解决办法
5912
查看次数

React Native:无法读取undefined的属性'push' - 让NavigatorIOS和ES6绑定(这个)

我正在开发一个react本机应用程序,我试图通过Facebook成功登录后将用户路由到下一个视图.

问题是我继续得到一个错误,指出"无法读取未定义的属性'推送'." 我已经在论坛上检查了所有相关的答案,我确保在我的函数调用中包含NavigatorIOS和bind(this) - 所以这些都是问题所在.

我很乐意帮助确定什么是错的,因为我是新手开发者.

这是错误:

Error: Cannot read property 'push' of undefined
 stack: 
  <unknown>                                              index.ios.bundle:1498
  MessageQueue.__invokeCallback                          index.ios.bundle:7235
  <unknown>                                              index.ios.bundle:7151
  guard                                                  index.ios.bundle:7104
  <unknown>                                              index.ios.bundle:7151
  <unknown>                                              index.ios.bundle:7148
  ReactDefaultBatchingStrategyTransaction.Mixin.perform  index.ios.bundle:6552
  Object.ReactDefaultBatchingStrategy.batchedUpdates     index.ios.bundle:15885
  Object.batchedUpdates                                  index.ios.bundle:5084
 URL: undefined
 line: undefined
 message: Cannot read property 'push' of undefined
Run Code Online (Sandbox Code Playgroud)

============================

这是我的代码

'use strict';

var React = require('react-native');
var Main = require('./App/Components/Main');
var Icon = require('./node_modules/react-native-vector-icons/FontAwesome');
var FacebookLoginManager = require('NativeModules').FacebookLoginManager;
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
NavigatorIOS,
Navigator,
} = React;

var styles = StyleSheet.create({ …
Run Code Online (Sandbox Code Playgroud)

javascript iphone facebook ios react-native

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

如何在同一个屏幕中更改视图(React Native)?

我想使用react-native-scrollable-tab-view复制以下内容:

ezgif com-video-to-gif

目前我的代码如下,但我不确定如何执行和合并模块以使事情变得更容易 - 有没有人对如何实现这一点有任何想法?(我是新手,所以任何帮助表示赞赏):

这是主要的(标签视图):

'use strict';

var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var Icon = require('react-native-vector-icons/FontAwesome');
var Restaurants = require('../Helpers/Restaurants');
var More = require('../Helpers/More');
var api = require('../Api/Api');
var Profile = require('../Helpers/Profile');
var Recipes = require('../Helpers/Recipes');
var Actions = require('react-native-router-flux').Actions;
var Home = require('../Helpers/Home');

var {
  StyleSheet,
  Text,
  View,
  Image, 
  TabBarIOS,
  Component
} = React;


class Main extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'home',
      notifCount: 0,
      presses: 0,
    };
  } …
Run Code Online (Sandbox Code Playgroud)

javascript tabbar ios react-native

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

WebView React Native中显示的iFrame边框

尝试将youtube视频动态添加到我的React Native应用中时,我选择使用WebView和iFrame的组合,因为当前的react-native-youtube组件不适用于RN 16 ^。最终,该解决方案确实可行,但是iframe边框仍然显示并且不会消失(即使使用css或frameborder = 0),也无法使用css更改其颜色。有任何想法吗?这是我的代码:

视频预览组件(用户可以在点击之前看到视频,标题等):

module.exports = React.createClass({
  render: function() {
      return (
        <TouchableHighlight 
          style={styles.touchCard}
          underlayColor={'transparent'}
          onPress={this.props.onPress} >
           <View style={styles.card}>
            <WebView
                style={styles.videoPreview}
                automaticallyAdjustContentInsets={true}
                scrollEnabled={false}
                style={styles.videoPreview}
                html={this.props.source}
                renderLoading={this.renderLoading}
                renderError={this.renderError}
                automaticallyAdjustContentInsets={false} />
              <View style={[styles.container, this.border('organge')]}>
                  <View style={[styles.header, this.border('blue')]}>
                      <Text style={[styles.previewText]}>{this.props.text}</Text>
                  </View>
                  <View style={[styles.footer, this.border('white')]}>
                    <View style={styles.sourceRow}>
                      <View style={[this.border('white')]}>
                        <ImageButton
                            style={[styles.logoBtn, , this.border('red'), styles.row]}
                            resizeMode={'contain'}
                            onPress={this.onHeartPress}
                            source={this.props.src} />
                      </View>
                      <View style={[this.border('white')]}>
                          <Text style={[styles.rowText, {fontWeight: 'bold'}]}>{this.props.entryBrand}</Text>
                          <Text style={[styles.rowText]}>{this.props.views}</Text>
                      </View>
                    </View>
                    <View style={[styles.heartRow, this.border('black')]}>
                      <KeywordBox 
                          style={[styles.category, this.border('blue')]}
                          key={this.props.key} 
                          text={this.props.category} 
                          onPress={this.props.categoryPress}
                          selected={this.props.selected} />
                    </View> …
Run Code Online (Sandbox Code Playgroud)

css youtube iframe react-native

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