标签: native-base

我正在尝试在我的应用程序中使用本机基本图标，但每次我都会收到Unrecognized font family \xe2\x80\x98Ionicons\xe2\x80\x99 错误。我在谷歌上搜索了它并尝试了一切。像\n rm -rf node_modules && npm install\n React-Native链接React-Native-Vector-icons\N React-Native Start --reset-cache

谁能告诉我一些基本设置，例如我应该在哪里创建我的资源文件夹以及所有用于此修复的内容？\n谢谢

我想更改输入的边框大小、颜色等。出于某种原因，当我将 2 个输入堆叠在一起时，我将 marginTop 添加到下面的输入，或者尝试调整输入的大小，然后将它们居中在页面中，左侧或底部的边框消失。

<View style={styles.formAlign}>
    <Item regular style={styles.email}>
        <Input placeholder='Email' />
     </Item>
     <Item regular style={styles.password}>
         <Input placeholder='Password' />
     </Item>
</View>





email:{
   borderWidth:4,
   color:'red'
},
password:{

},
formAlign:{
    justifyContent:'center',
    alignItems:'center'
},

我正在使用本机基础库的按钮。

这是我的全部代码：

  <LinearGradient
      start={{x: 0.0, y: 0.1}} end={{x: 0.5, y: 1.0}}
      locations={[0.2,0.23,0.9]}
      colors={[randomColor1,randomColor1, randomColor2]}
      style={{flex:1,height:'100%',width:'100%',flexDirection: 'column'}}>

      <View style={{width:'100%',height:'100%',flexDirection:'column',flex:1}}>
        <View style={{flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
          <Text style={{fontSize:22,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center'}}>Powerful Composition</Text>
          <Button style={{textAlign:'center',justifyContent: 'center',alignItems: 'center',paddingLeft:40,paddingRight:40,marginTop:10,height:40}} light><Text style={{textAlign:'center'}}> JOIN </Text></Button>
        </View>

        <Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',left:0,bottom:0,marginLeft:6,marginBottom:6}}>607.8 K Votes</Text>

        <Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',right:0,bottom:0,marginLeft:6,marginBottom:6,marginRight:4}}>9 Days Left</Text>

      </View>


  </LinearGradient>

我Text是屏幕的中心。但Button它下面的那个在左边的屏幕上！

我哪里错了？

更新：添加了 DatePicker。

在下面的代码中，我无法左对齐三个项目（第一个项目向右移动）。知道该怎么做吗？

import React from "react";
import { Text } from "react-native";
import {
  Container, Content, Icon, Form, Item, Input, Label, DatePicker, Picker
} from "native-base";

export default class Test extends React.Component {

  render() {
    return (
      <Container style={{ flex: 1, backgroundColor: '#fff' }}>
        <Content padder>
          <Form style={{ flex: 1, alignItems: 'flex-start' }}>

            <Item style={{ flexDirection: 'column', marginBottom: 10,
               paddingLeft: 0, marginLeft: 0 }}>
              <DatePicker
                defaultDate={new Date()}
                locale={"en"}
                timeZoneOffsetInMinutes={undefined}
                modalTransparent={false}
                animationType={"fade"}
                androidMode={"default"}
                placeHolderText="Click here to select date"
                textStyle={{ color: …

我正在使用基于本机的选择组件，当我尝试打开选择项目时，它会打开键盘。在ios上工作完美，我可以隐藏下拉图标并单击选择字段上的任意位置，它将打开选择项目，但在android上我只能在按下下拉图标时打开。我使用的是native-base 3.4.28，之前使用的是3.2.1，它可以在ios和android上运行，升级后就不行了。

<Select
          flex={1}
          // @ts-ignore
          dropdownIcon={() => null}
          selectedValue={props.value}
          placeholder="Gender"
          _selectedItem={{
            bg: 'primary.100',
            endIcon: <CheckIcon size="5" />,
          }}
          onValueChange={props.handleChange}
          fontWeight={props.value ? 600 : 400}
          fontSize={'14px'}
          {...props.selectProps}
        >
          <Select.Item label="Female" value={Gender.FEMALE} />
          <Select.Item label="Male" value={Gender.MALE} />
          <Select.Item label="Non binary" value={Gender.NON_BINARY} />
          <Select.Item
            label="Not listed above"
            value={Gender.NOT_LISTED_ABOVE}
          />
          <Select.Item
            label="Prefer not to say"
            value={Gender.PREFER_NOT_TO_SAY}
          />
        </Select>

我尝试在 onOpen 属性中关闭键盘，但不起作用

我想要两个简单的输入框.

有一个loginName输入框和一个密码输入框.

目前,我将这两个输入框的值映射为"状态".

现在,使用NativeBase.如何动态显示"成功""错误",就像他们在演示中所做的那样？ http://nativebase.io/docs/v0.5.9/components#successInputTextbox

这是代码:

 // Bottom.js
<StyleProvider style={getTheme(commonColor)}>
    <Footer>
        <FooterTab>
            <Button active>
                <Icon active name="food" size={24}  />
                <Text active>Lunch Box</Text>
            </Button>
            <Button>
                <Icon name="coins" size={24} />
                <Text>Point</Text>
            </Button>
            <Button>
                <Icon name="face" size={24} />
                <Text>Profile</Text>
            </Button>
        </FooterTab>
    </Footer>

</StyleProvider>

// commonColor.js

// Footer
footerHeight: 55,
footerDefaultBg: '#ffffff',

// FooterTab
tabBarTextColor: '#FFF',
tabBarTextSize: platform === 'ios' ? 14 : 16,
activeTab: platform === 'ios' ? '#007aff' : '#fff',
sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: '#fff',
tabActiveBgColor: platform === 'ios' ? '#1569f4' : '#1569f4',

这是结果:

我已经尝试直接编辑FooterTab.js但根本没有改变.

渲染上可能发生的唯一变化是tabActiveBgColor: platform …

我想在nativebase中使用redux-form，但它的功能与在Web中使用的功能不同。我不认为我的onSubmit回调没有被调用，我也不知道为什么。

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import {
  Container,
  Content,
  Item,
  Input,
  Button,
  Form,
  Label,
  Text,
  Icon
} from 'native-base';

import * as actions from '../actions';

class Signin extends Component {
  handleFormSubmit({ username, password }) {
    this.props.userSignIn({ username, password });
  }

  renderUsername() {
    return (
      <Item floatingLabel>
        <Icon name="ios-person" />
        <Label>Username</Label>
        <Input autoCorrect={false} autoCapitalize="none"/>
      </Item>
    );
  }

  renderPassword() {
    return (
      <Item floatingLabel>
        <Icon name="ios-lock" />
        <Label>Password</Label>
        <Input secureTextEntry={true} …

我正在使用本机反应。我想在iOS和android两者中居中对齐标题，因为文本很长，所以用“…”将其隐藏。flex:3完全应用显示标题，但不会使标题居中对齐。即使申请alignItems: 'center',alignSelf: 'center'也无济于事。

我试过其他选项无法修复它。我该如何解决？

码：

 <Header  iosStatusbar="light-content" androidStatusBarColor='#000' >
<Left style={{flex:1}}>
<Button transparent onPress={() =>  this.navigateCustom("goBack")}>
 <Icon name="arrow-back" />
 </Button>
</Left>

    <Body style={{flex:3,}}>
     <Title>THIS IS A LONG TITLE TEST</Title>
   </Body>

  <Right style={{flex:1}}>
  <Button transparent onPress={()=> this.navigateCustom("DrawerOpen") }>
     <IconEvil  name={"menu"}  style={{ color: "rgb(255,255,255)", fontSize:30}}/>
     </Button>
  </Right>
      </Header>

编辑：将flex：1和身体的中心对齐后

我正在尝试为托管的expo项目工作的“ web博览会”部分。

我将托管的expo项目升级到了expo sdk 33，以便我也可以在Web平台上部署我的应用程序，并且理想情况下可以将其从Firebase托管。我遵循了博览会的官方指示：

升级Expo SDK演练

Expo CLI和SDK Web支持Beta

在Expo init项目中使用Expo for Web

有关如何升级到SDK 33以及如何配置和启用Web平台的信息。

Expo-cli版本为：“ 2.19.5”

我正在使用纱线

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "latest",
    "expo": "next",
    "expo-cli": "^2.19.5",
    "expo-codemod": "^1.0.0",
    "expo-constants": "latest",
    "expo-image-manipulator": "latest",
    "expo-image-picker": "latest",
    "expo-intent-launcher": "latest",
    "expo-permissions": "latest",
    "firebase": "^5.8.1",
    "native-base": "^2.12.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-firebaseui": "^3.1.2",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-alert-async": "^1.0.3",
    "react-native-modal": "^9.0.0",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-picker-select": "^5.2.3", …