我正在使用 react-native + native-base 并使用简单的布局 - 页眉内容页脚。我在该部分使用 MapView，我希望地图填充内容区域。如果我在 MapView 的样式中指定宽度和高度，则地图显示正常。如果我将 MapView 的样式设置为 flex : 1 地图不显示
这是我的代码..我想要的只是让地图填充内容..
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
MapView
} from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon } from 'native-base';
class Project extends Component {
render() {
return (
<Container>
<Header>
<Title>TEST</Title>
</Header>
<Content>
<MapView
style={styles.map}
showsUserLocation={true}
/>
</Content>
<Footer>
<FooterTab>
<Button …我想显示带有JSON文件新闻的卡片。获取JSON可以正常工作，但是我想添加一个onPress事件，因此我可以单击该卡并导航至该文章。
我的卡视图：
<Card>
<CardItem button onPress={this._OnButtonPress(news.id)}>
<Left>
<Body>
<Text style={styles.cardText}>{news.title}</Text>
</Body>
</Left>
</CardItem>
<CardItem>
<Left>
<Icon style={styles.icon} name="chatbubbles" />
<Text>{news.comments} comments</Text>
</Left>
<Right>
<Text>{news.published}</Text>
</Right>
</CardItem>
</Card>
我正在尝试将变量传递给onButtonPress（）函数
_OnButtonPress(newsID) {
Alert.alert(newsID.toString());
}
为了测试onPress事件，我所做的只是提醒参数。
有谁知道我该如何解决这个问题以及我在这里做错了什么。提前致谢。
更新资料
我更新的课程：
import React, { Component } from "react";
import {
Image,
ListView,
StyleSheet,
Text,
View,
Alert
} from 'react-native';
import {
Container,
Header,
Left,
Right,
Button,
Card,
CardItem,
Icon,
Body,
Content,
Logo
} from 'native-base';
import styles from "./styles";
const logo = require("../../../img/f1today.png");
var …我在 React Native 应用程序中使用 NativeBase。我试图根据在 redux 操作中设置的错误显示 Toast 组件，因为它是通过调用 API 发生的。
它现在会显示，但目前我收到警告消息：
警告：无法在现有状态转换期间更新（例如在
render组件内部或其他组件的构造函数中）。Render 方法应该是 props 和 state 的纯函数；构造函数的副作用是一种反模式，但可以移至componentWillMount.
我不确定如何绑定它或我可以做些什么来解决警告。
渲染方法
render() {
return (
<View>
{this.renderError()}
{this.renderForm()}
</View>
);
}渲染错误方法
renderError() {
if (this.props.error.type === 'server') {
return (
Toast.show({
text: this.props.error.message,
buttonText: 'Okay',
duration: 5000,
type: 'danger'
})
);
}
}版本
反应本机：0.55.4
本机基础：2.4.5
编辑：为清楚起见添加示例
我需要根据服务器的响应显示 Toast。例如，如果用户名和密码与帐户不匹配，我需要呈现 Toast。
解决方案：
我最终创建了一个 ToastService：
import { Toast } from 'native-base';
function showToast(message) {
return (
Toast.show({ …请检查这个世博小吃.
我有一个用于登录和未登录状态的switch-navigator.
当用户登录时,切换器加载一个DrawerNavigator加载Screen1并加载侧边栏(SideBar.js)的contentComponent
在里面,Screen1我正在调用菜单汉堡按钮this.props.navigation.navigate('DrawerOpen');的onPress事件.但它没有打开抽屉.我在做什么呢
所以我正在使用Native Base <Input>标签,试图设置refs来处理表格字段中的"tabbing".我有以下代码:
<Item floatingLabel>
<Label style={{ color: "#fff" }}>First Name</Label>
<Input
ref={input => {
this.firstNameRef = input;
}}
onSubmitEditing={() => {
this.lastNameRef._root.focus();
}}
returnKeyType={"next"}
/>
</Item>
<Item floatingLabel last>
<Label style={{ color: "#fff" }}>Last Name</Label>
<Input
ref={input => {
this.lastNameRef = input;
}}
/>
</Item>
基本上,我有2个<Input>标签,都有refset(this.firstNameRef和this.lastNameRef),但在加载App时,按First Name,然后在键盘上按"next"我收到以下错误:
无法读取未定义
onSubmitEditing Signup.js:162:26的属性'_root'
看来,使用<Input>实际上不设置任何参考价值,所以this.lastNameRef是null.
我也尝试使用React Native的<TextInput>元素,它确实如上所述处理设置引用,但在提交后仍然似乎没有处理焦点(即使._root从.focus()逻辑中删除).
还有其他人看过这个问题吗？
注意:目前仅在iOS中测试过.
有没有人创建过可以保存多个值的 TextInput 组件？例如，标签=“水果”并且单个文本输入允许用户键入“香蕉”、“橙子”等？可能使用“Return”/“Enter”键自动分割它们？
我有一些带有本机基础代码的react-native/expo，可以在手机或模拟器上正常运行。我尝试使用jest和react-native-testing-library为其创建一个测试。这样做时，无论里面有什么from native-base未渲染且无法在测试中找到。
有没有人经历过这个并且知道解决方案，以便在测试期间呈现 Content 的子项？
下面是一个示例代码来说明我的意思。非常感谢你的帮助。
import { render } from 'react-native-testing-library';
import {
Content, Container, Text
} from 'native-base';
class App extends React.Component {
render() {
return (
<Container>
<Content>
<Text testID="textId">Hello</Text>
</Content>
</Container>
);
}
}
describe('Testing Content', () => {
const { queryByTestId } = render(<App />)
it('renders text inside content', () => {
expect(queryByTestId('textId')).not.toBeNull()
});
})
软件包的版本是：
"expo": "^32.0.0",
"react": "16.5.0",
"native-base": "^2.12.1",
"jest-expo": "^32.0.0",
"react-native-testing-library": "^1.7.0"
我正在使用NativeBase Header。在标题中，我有购物车和心愿单等按钮。但我无法更改该图标的颜色。
这是我的标题代码：
<Header>
<Left>
<Button transparent onPress={props.onMenuPress}>
<Icon type="Ionicons" name="menu" color="#ff0000" />
</Button>
</Left>
<Body>
<Title>{props.title}</Title>
</Body>
<Right>
<Button transparent onPress={props.onWishlistPress}>
<Icon name="heart" active={false} color="#ff0000" />
</Button>
<Button transparent onPress={props.onCartPress} icon>
<Icon name="cart" active={false} color="#ff0000" />
</Button>
</Right>
</Header>
请任何人都可以告诉我这里有什么问题？
Expo 版本：45 使用堆栈导航和 Native Base。我正在使用道具，但收到此警告。为什么我会收到此警告？
使用:
我做了什么:
1:expo-cli init测试
出现提示时,我选择创建一个空白项目.
2:cd测试
3:npm install --save native-base
4:npm install --save @ expo/vector-icons
然后我在App.js中导入并使用基于本地的Text组件
以下是构建应用时出现的错误:
无法从"node_modules/native-base/dist/src/basic/IconNB.js"解析"@ expo/vector-icons/FontAwesome5"
有任何建议或是否是已知问题？我做错了吗？
native-base ×10
react-native ×10
javascript ×3
expo ×2
jestjs ×1
react-redux ×1
reactjs ×1
reference ×1
textinput ×1
toast ×1