我阅读了https://blog.nativebase.io/the-caveats-of-using-navigator-in-react-native-9547d99172ce#.cghvxk1mo
使用react-native-router-flux作为导航器,但是当我将其与nativebase一起使用时。nativebase的组件未激活
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import { AppRegistry,Text,View,Navigator } from 'react-native';
import { Container,Header,Content,Title,Badge,Tabs,Button,Icon} from 'native-base';
import { Router, Scene } from 'react-native-router-flux';
import Home from './component/Home';
import MyScene from './component/MyScene';
class CookApp extends Component {
//State la bien dung de luu giu trang thai. Con props la bien dung de trung chuyen du lieu, ham giua cac component
//dat ten class phai viet …Run Code Online (Sandbox Code Playgroud)javascript react-native native-base react-native-router-flux
我刚刚升级到 NativeBase 2.0 并学习了设置标头的新方法。
有没有办法Body在切割它之前扩展最大数字字符的数量并将“..”放在最后。
<Header>
<Left>
<Button transparent onPress={ () => this.props.navigator.pop() }>
<Icon name='ios-backspace'/>
</Button>
</Left>
<Body>
<Title>New Equipment</Title>
</Body>
<Header/>
Run Code Online (Sandbox Code Playgroud)
我猜它需要对自定义主题(或 flex?)进行一些调整,但我似乎看不到我必须更改的内容
头文件.js
import { Platform, PixelRatio } from 'react-native';
import _ from 'lodash';
import variable from './../variables/platform';
export default (variables = variable) => {
const platformStyle = variables.platformStyle;
const platform = variables.platform;
const headerTheme = {
'.span': {
height: 128,
'NativeBase.Left': {
alignSelf: 'flex-start',
},
'NativeBase.Body': {
alignSelf: 'flex-end',
alignItems: 'flex-start',
justifyContent: …Run Code Online (Sandbox Code Playgroud) 我在这里问这个问题感到很疯狂,但是我找不到任何有关如何提交表单和捕获RN数据的好的教程。我发现的所有东西都是有人在推动一个库“只是npm install react-native-form-genie-magic-box并在您的项目中调用它 ”。
但是我只想知道-如何在香草React Native中提交表单。
示例代码:
AuthContainer
class AuthContainer extends Component {
render() {
const { errorMessage, handleLogin } = this.props
return (
<Login
errorMessage={errorMessage}
onLoginClick={(e) => handleLogin(e)}
/>
)
}
}
.....
const mapDispatchToProps = (dispatch) => {
return {
handleLogin: (e) => {
e.preventDefault()
const form = e.target
const data = serialize(form, {hash: true})
const creds = { email:data.email, password: data.password }
dispatch(loginUser(creds))
},
}
}
Run Code Online (Sandbox Code Playgroud)
登录
import { Container, Content, Form, …Run Code Online (Sandbox Code Playgroud) 当我根据示例在Button中添加Text元素时,文本以大写形式显示.我需要显示一个小写文本的按钮.我使用的是原生基础版本2.1.4.任何有关这方面的帮助将非常感激.例如,如果我包含下面的代码,按钮会说SUBMIT而不是Submit:
import { Button} from 'native-base';
<Button>
<Text>Submit</Text>
</Button>
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)
我目前是 react native 的新手,并尝试使用 native base,该组件很好,但我坚持在 native base 中更改主题,而我知道如何使用 style 但并非所有样式都可以在 native base 中应用(例如在活动页脚选项卡中更改颜色)。即使可以自定义样式,我也希望像在文档中一样更改主题。但我无法克服这一点。
到目前为止,我已经尝试使用我的自定义主题并应用到我的组件中,但它没有改变。
我的工作区:-react-native 2.0.1 -native-base 2.3.1
谢谢
我正在使用Expo并实现Native Base它,每当"MainTabNavigator"图标时我都会尝试"滚动到顶部"<Ionicons/>
是否应该<Content>在<Ionicons/>(在MainTabNavigator中)中实现句柄?
版本:
"native-base": "^2.4.2",
"react": "16.3.1",
"react-native": "0.55.2",
"react-native-global-font": "^1.0.1",
"react-native-router-flux": "^4.0.0-beta.28",
"react-navigation": "^1.5.11"
Run Code Online (Sandbox Code Playgroud)
当我添加反应导航时,我无法更改状态栏颜色,我的状态栏变为蓝色。
这是我的Navigationview.js代码
render() {
return (
<Root style={styles.container}>
<StatusBar
backgroundColor="white"
barStyle="dark-content"
/>
<MainView />
</Root>
);
}
const drawerHeader = (props) => (
<Container style={styles.container}>
<Header style={styles.header}>
<Body style={styles.body}>
<Icon name="person" style={{ fontSize: 40, color: '#CCCCCC' }} />
</Body>
</Header>
<Content>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
<Button title="Logout" onPress={() => Actions.reset('login')} />
</SafeAreaView>
</Content>
</Container>
);
const MainView = DrawerNavigator({
DASHBOARD: { …Run Code Online (Sandbox Code Playgroud) android android-statusbar react-native native-base react-navigation
---------index.js--------
import { AppRegistry } from 'react-native';
import Navigate from './Navigate';
AppRegistry.registerComponent('form1', () => Navigate);
----Navigate.js-----
import React from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import TabsList from './TabsList';
export const StackTab1 = StackNavigator({
TabList: { screen: TabsList},
});
export const Navigate = DrawerNavigator(
{
Tab1: { screen : StackTab1 },
Tab2: { screen : StackTab1 },
Tab3: { screen : StackTab1 }
});
Run Code Online (Sandbox Code Playgroud)
每当我尝试运行我的Android模拟器时,我都会收到该错误.安装了所有模块,除了出现在我的模拟器中的错误外,我的IDE中不会抛出任何错误.