小编Ste*_*ame的帖子

因此，我编写了一个小页面的应用程序，该应用程序查询API并返回一堆结果，并在用户输入搜索字词的输入字段下方显示给用户。

每次输入新的搜索词并按Enter时，都会重新查询API，并使用新结果更新页面。

但是，我希望能够在浏览器中单击“后退”按钮，然后再浏览以前的搜索结果。我该怎么做？

我很确定这很简单，但是我不太清楚如何将其组合在一起。目前，我的应用可以在iOS上完美运行，但是我使用了一些与Android不兼容的控件：

<View style={containerStyle}>
  <Text style={labelStyle}>Drink:</Text>
  <SegmentedControlIOS
    tintColor={styleBackground}
    style={{ flex: 2 }}
    values={['Value1', 'Value2']}
    selectedIndex={this.state.drink}
    onChange={(event) => {
      this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
    }}
  />
  <View style={{ flex: 1 }} />
</View>

我想使用React-Native-Segmented-Android库修复此问题。我觉得我应该能够做类似的事情：

<View style={containerStyle}>
  <Text style={labelStyle}>Drink:</Text>
  const Component = Platform.select({
      ios: () => require('SegmentedControlIOS'),
      android: () => require('react-native-segmented-android'),
  })(      
    tintColor={styleBackground}
    style={{ flex: 2 }}
    values={['Value1', 'Value2']}
    selectedIndex={this.state.drink}
    onChange={(event) => {
      this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
    }}
  />);
  <View style={{ flex: 1 }} />
</View>

但这（也许不足为奇）不起作用。谁能指出我正确的方法？我知道我只能在iOS / Android中使用两个不同的文件，但如果可能的话，我希望将其保存在一个文件中。

在我的 React Native 项目文件夹中，我有保存组件的 src 文件，以及一些我想在 iOS 和 Android 上使用的图像。如果我使用这个：

<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} />

然后图像就完美加载了。但是，图像标签中的源将在用户拍照时动态创建。这段代码：

<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} />

不起作用。没有抛出错误，但没有显示图像。我确信我走在正确的轨道上，因为当我用道具 ( ) 替换源时，它会使用相同的代码返回相机拍摄的图像并存储在设备上，<Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} />但对于静态图像，它不会发生。建议？

假设我有一个像这样的小组件：

按钮.js

import React from 'react';
import './Button.css';

export default class Button extends React.Component {
  render() {
    return (
      <a href={ this.props.url } className={`button button-${ this.props.type }`}>
        { this.props.content }
      </a>
    );
  }
}

还有一些超级基本的样式，如下所示：

按钮.css

.button {
  color: white;
  padding: 1em;
  border-radius: 5px;
  text-decoration: none;
}

.button-primary {
  background-color: red;
}
.button-primary:hover {
  background-color: darkred
}

.button-secondary {
  background-color: aqua;
  color: black;
}
.button-secondary:hover {
  background-color: darkcyan;
  color: white;
}

假设我想为此编写一些测试：

按钮.test.js

import React from 'react';
import Enzyme, {shallow, …

所以我对React Native仍然有点新意,但我有一个应用程序几乎是我想要它的工作.我有App.js使用该TabBarIOS组件在屏幕底部显示我的选项卡式导航.当您触摸选项卡时,状态将更新并加载并显示相关内容:

App.js

import React, { Component } from 'react';
import { TabBarIOS, Platform, Image } from 'react-native';

import IconII from 'react-native-vector-icons/Ionicons';
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';

import Colors from './Colors';
import RouterItem1 from './routers/RouterItem1';
import RouterItem2 from './routers/RouterItem2';
import RouterHome from './routers/RouterHome';
import Settings from './components/Settings';

class FooterNav extends Component {

  state = {
    selectedTab: 'home',
  };

  handleClick = (routeData) => {
    console.log('This has received data', routeData);
    this.setState({ selectedTab: routeData });
    console.log(this.state);
  }

  renderCurrentView() {
    switch …