标签: native-base

我刚刚发现了NativeBase for react-native,我真的很喜欢它.我正在关注他们网站上的教程.据我所知,NativeBase使用Easy-Grid进行布局.我想在我的页面上垂直居中一个按钮.这是我正在构建的测试应用程序的简单界面:

          <Container> 
                <Header>
                    <Button trnsparent>
                        <Icon name='ios-menu' />
                    </Button>

                    <Title>Poki</Title>

                </Header>

                <Content style={{padding: 10}}>  

                    <Grid>
                        <Col>
                            <Button block bordered info style={{flex: 1}}>                         
                                Login 
                            </Button>
                        </Col>
                    </Grid>


                </Content>

                <Footer>
                    <FooterTab>
                        <Button transparent>
                            <Icon name='ios-call' />
                        </Button>  
                    </FooterTab>
                </Footer>
            </Container>

这是我的genymotion模拟器上的结果:

如何使用easy-grid将登录按钮垂直居中在我的页面上？我试图应用flexbox属性而没有结果.

谢谢您的帮助.

当我在react-native项目中安装NativeBase和React-Native-Router-Flux时,我收到此错误:

Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: react-native-vector-icons
  Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
Error: @providesModule naming collision:
  Duplicate module name: react-native-vector-icons
  Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
    at HasteMap._updateHasteMap (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:159:13)
    at p.getName.then.name (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:134:31)

我有一个很大的问题,我花了一整天的时间来修复它并在几个包的依赖关系之间找到共识.我在运行测试时遇到问题:

Users/P/Projects/react-native/node_modules/native-base-shoutem-theme/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import connectStyle from './src/connectStyle';
                                                                                             ^^^^^^
    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (node_modules/native-base/dist/src/index.js:1:1133)
      at Object.<anonymous> (app/index.js:18:96)

现在我搜索反应良好的版本,反应本机,反应dom,native-base和react-test-renderer.我尝试了新的和旧的一个,但有时我有这个错误,有时其他..我决定解决这个,因为它的问题与这些最新版本.我的NPM:

"babel-cli":"6.24.1","react-native":"0.44.0","native-base":"2.1.2","react":"16.0.0-alpha.3", "react-test-renderer":"16.0.0-alpha.3"

节点版本7.7.2 npm版本4.1.2

如果您有其他WORKING可选版本,请通过我这些或帮助修复此错误;)我认为我将能够修复它与react-native init相比,并且测试对我有效但不在我的项目上...我不知道出了什么问题:/

我知道这有点棘手,但请帮助我;)

编辑:在版本react-native 0.45.0我有这个错误

 ? Test suite failed to run

    TypeError: Cannot read property 'ReactCurrentOwner' of undefined

      at Object.<anonymous> (node_modules/react-native/Libraries/Renderer/src/renderers/shared/ReactGlobalSharedState.js:18:33)
      at Object.<anonymous> (node_modules/react-native/Libraries/Renderer/src/renderers/shared/ReactDebugTool.js:18:1)
      at Object.<anonymous> (node_modules/react-native/Libraries/Renderer/src/renderers/shared/ReactInstrumentation.js:19:20)

我的旧版本,但我想升级包:

"babel-cli":"6.23.0""react":"15.4.1","react-native":"0.42.3","native-base":"2.0.12","react-addons-" test-utils":"15.4.1",

我正在使用native-base来创建React Native应用程序:

我正在使用Header Component来显示Body,Left和Right元素.根据文档,标题应该自动居中,但不会(如下所示).

我错过了一些简单的东西吗？任何帮助,将不胜感激!

import { 
    Container,
    Header,
    Content,
    Left,
    Right,
    Body,
    Title,
    Icon
} from "native-base"

export default class Seminars extends React.Component{

    render(){
        return(
            <Container style={styles.container}>
                <Header style={styles.header}>
                    <Left>
                        <Icon name='arrow-back' />
                    </Left>
                    <Body>
                        <Title>Seminars</Title>
                    </Body>
                    <Right>
                        <Icon name='menu' />
                    </Right>
                </Header>
                <Content contentContainerStyle={styles.content} >
                    <Text>Content Here</Text>
                </Content>
            </Container>
        )
    }
}
const styles = StyleSheet.create({
    container: {

    },
    header: {
        paddingRight: 15,
        paddingLeft: 15
    },
    content: {
        display: "flex",
        flex: 1,
        justifyContent: "center",
        padding: 15
    }
});

根据本教程,这是我用作反应基础组件作为侧栏组件的组件,它的工作非常好,但是当我将列表项更改<Text>为<Button>

    import { Text, Container, Header, Content, List, ListItem, TextBody, Button } from 'native-base';
import { StackNavigator, DrawerNavigator } from 'react-navigation'

export default class SideBar extends Component {

    render() {
        return (
            <Content style={{ backgroundColor: '#ffffff' }}>
                <Container>

                    <Content>
                        <List>
                            <ListItem>
                                <Text>First</Text>
                            </ListItem>
                            <ListItem>
                                <Text>Secount</Text>
                            </ListItem>
                            <ListItem>
                                <Text>Third</Text>
                            </ListItem>
                        </List>
                    </Content>
                </Container>
            </Content>
        );
    }
}

我收到此错误:

如果没有measure函数,则无法将没有YogaNede的子项添加到父级!(尝试将'ReactRawTextshadow'添加到'LayoutShadowNode')

根本无法理解这个错误,并没有在网上看到任何关于它的事情!

> Cannot add a child that doesn't have a YogaNode to a parent without …

我有一个项目，主要是编写 Native Base 组件。但在某些情况下，我想使用 React Native Elements。我只是想知道是否可以单独使用它们。

对于某些组件，我将只使用 React Native Elements，例如 Avatar 组件。不是将它们一起导入，我的意思是只有一个 UI 工具包。

我正在尝试将 NativeBase 与 ReactNative 一起使用，并将图片作为背景。我一直在谷歌搜索一段时间，这是我想出的代码：

export default class WelcomeScreen extends Component {
    render(){
        return (
            <Container>
                <Header>
                    <Button transparent>
                        <Icon name='ios-arrow-back' />
                    </Button>
                </Header>
                <Content>
                    <Image source={require('../images/telula_upclose.jpeg')} style={styles.backgroundImage} />
                    <Text>Do you ever feel like you dont have a partner</Text>
                </Content>
            </Container>
        );
    }
}

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    backgroundColor:'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

问题是这会极大地拉伸图像，以至于在模拟器中无法识别。这是模拟器中的内容与实际图像相比的图片：

这是实际图像：

我该如何解决？

我正在反应本地开发阿拉伯语的应用程序，我已经使用了本地的标签和菜单。我已经正确对齐，因为只有一个单词。但是现在我必须写从右到左对齐的句子。有没有办法为特定的文本设置RTL格式，因为当我设置I18nManager.forceRTL(true);它时，整个应用程序都更改了它，并且我以前的工作全部毁了并且选项卡无法正常工作。请帮忙 。

这是我的错误：

[未处理的承诺拒绝：TypeError: undefined is not an object (evaluating '_expo.default.Font')] * app\views\Login.js:33:15 in componentWillMount$

最初我收到如下错误：

fontFamily "Roboto_medium" 不是系统字体，还没有通过 Font.loadAsync 加载。如果您打算使用系统字体，请确保您输入的名称正确并且您的设备操作系统支持它。

所以我使用 load async 来加载字体，但开始出现上述错误。

import React, { Component } from "react";
import { Alert, AsyncStorage, StyleSheet, Text } from "react-native";
import {Container,Header,Content,Card,CardItem,Body,Form,Input,Button,Item
} from "native-base";
import { AppHeader } from "../sections/Header";
import Expo from "expo";
import {Font} from 'expo';
export class Login extends Component {
  static navigationOptions = {
    header: null
  };

  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: …

我正在使用 DatePicker 的本机库，该库在 Android 上运行得很好。但是，当我通过 iPhone 上的 Expo 应用程序运行它时，当您单击它时它不会打开日历。相反，它会在左下角打开一个小框，然后仅当您单击该框时才打开日历。

这是当您单击 DatePicker 时发生的情况：

然后，如果您单击底部的“2021 年 1 月 29 日”框，您将获得日历并且一切都会按预期进行：

我不知道它是否相关，但似乎可疑焦点发生了一些事情，因为在 Android 上，当您第一次从 DatePicker 打开日历时，您必须按日期两次，就像第一个获得焦点一样回到应用程序，第二个实际上是在注册新闻。

以下是生成 DatePicker 的代码：

  render() {
    return (
      <Container style={styles.container}>

        <Content padder style={{ padding: 0 }}>

          <View style={{ flexDirection: 'row' }}>
            <DatePicker
              defaultDate={this.state.CheckDate}
              minimumDate={new Date(2018, 1, 1)}
              maximumDate={new Date(2099, 12, 31)}
              chosenDate={this.state.chosenDate}
              // locale={"en"}
              modalTransparent={true}
              animationType={"fade"}
              androidMode={"default"}
              placeHolderText="Select Date"
              textStyle={{ color: "grey" }}
              // placeHolderTextStyle={{ color: "#d3d3d3" }}
              placeHolderTextStyle={{ fontSize: 20, color: "#999999", textAlignVertical: "bottom" }}
              onChange={this.onChangeCheckDate}
              disabled={false} …