用户在文本框里输入关键词，回车可以执行搜索 .. 在等待搜索结果的时候， 我想在文本框的右边显示一个加载指示器 .. 打开 SearchForm.js .. 确定 ActivityIndicatorIOS 已经从 React 里面提取出来了 ..

找到组件的 render 方法 .. 在文本框的下面，用一个 ActivityIndicatorIOS .. 大小设置成 small .. 再添加点样式 ..

用一个 position 属性 .. 设置成 absolute .. 再用一个 right ，设置一下右边的距离，这里设置成 10 .. 再添加一个 top .. 设置一下顶部的位置 .. 这里设置成 20 ..

这样在文本框的右边就会显示一个加载指示 .. 现在我希望它只有在等待搜索结果的时候才显示出来 .. 在组件的 constructor 方法里面， 再添加一个默认的状态 .. 名字是 loaded .. 表示是否加载了内容 .. 它的值先设置成 true ..

在回车执行搜索的时候，会调用 fetchData 这个方法 .. 这里我们再设置一下 loaded 的状态 .. 把它的值设置成 false ... 然后在得到搜索结果以后，再把它的值设置成 true ..

在这个 ActivityIndicatorIOS 组件里面，可以添加一个 animating 这个属性 .. 它的值是 true 的值，就会显示这个加载指示 ..

这里我们可以使用一个 this.state.loaded ... 以它前面添加一个 ! 号 .. 意思是，如果没有加载数据，就显示这个加载指示 ..

保存 .. 在文本框里输入点内容 .. 回车执行一下 .. 在文本框的右边会显示一个加载指示 .. 得到数据以后，会再设置一下 loaded 这个状态，这样就不会再显示那个加载指示了 ..

现在有一个小问题，就是现在在这个文本框里输入内容的时候，那个清空按钮就不见了 .. 因为它被加载指示器给盖住了 .. 我们可以先把它的不透明度设置成 0 .. 在要显示它的时候，再把不透明度设置成 1 ..

先添加一个状态 .. 名字是 opacity .. 它的默认的值设置成 0 .. 然后在 fetchData 里面，再设置一下 opacity 这个状态 .. 把它设置成 1 ．．　这样就会显示加载指示　．．　得到数据以后，我们再把它的值设置成　0 ...

然后在这个加载指示器组件的上面，添加一个 opacity 这个样式 .. 它的值可以使用 this.state.opacity 来表示 ..

保存 ..

再输入点东西 .. 会在文本框上面显示一个清空内容的按钮 .. 回车执行一下 .. 会显示加载指示器 ..