好像我在创建显示器时遇到了问题:与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) 希望一切安好.
我似乎在使用基本按钮功能时遇到了困难.我需要的只是要更改的类的状态以及每次按下按钮时要更改的按钮样式.与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) 我试图在图像上叠加标题 - 图像以较低的不透明度变暗.但是,不透明效果也会改变叠加文本 - 使其变暗.有什么解决方法吗?这是看起来像:
这是我的自定义组件的代码(文章预览 - 上面的图像是一行文章预览组件):
//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) 我正在开发一个应用程序,在进入应用程序的主页面之前(初始注册后)让用户通过一个简短的游览.我想做的是使用以下设计覆盖应用页面(通过标签栏看到):
然而,React Native Overlay有一段历史,它遗留了很多错误 - 它也没有为我个人工作过.React Native ToolTip模块不再受支持,也不起作用.有没有人做过这个?如果是这样,怎么样?感谢您的意见!
我正在开发一个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) 我想使用react-native-scrollable-tab-view复制以下内容:
目前我的代码如下,但我不确定如何执行和合并模块以使事情变得更容易 - 有没有人对如何实现这一点有任何想法?(我是新手,所以任何帮助表示赞赏):
这是主要的(标签视图):
'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) 尝试将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) react-native ×7
javascript ×4
ios ×3
css ×2
overlay ×2
button ×1
facebook ×1
flexbox ×1
iframe ×1
image ×1
instructions ×1
iphone ×1
opacity ×1
tabbar ×1
youtube ×1