react-native-scrollable-tab-view切换标签报Can't find variable: index如何解决

错误原因 #

你已经把标签索引存在了组件的state中，但在ActionButton的图标判断逻辑里直接引用index变量，没有通过this.state访问，导致找不到变量报错。

修复方法 #

1. 先给组件添加初始state，避免首次渲染时索引值为空：

export default class App extends Component{
  // 添加初始state配置
  state = {
    index: 0 // 默认选中第一个标签，可根据你的需求修改初始值
  }

  changeState =(i, ref) => {
    this.setState({index : i})
  }

2. 修改ActionButton组件的icon属性取值，把index替换为this.state.index：

<ActionButton buttonColor="#075e54"
  icon={<Icon name={this.state.index === 0 ? 'chat' : this.state.index === 1 ? 'photo-camera' : 'call'}></Icon>}
/>

注意：三个标签的索引从0开始计数，顺序为你在ScrollableTabView中写的子组件顺序：CHATS对应0、STATES对应1、CALLS对应2，你可以根据实际想要的图标对应关系调整判断逻辑。

3. 额外检查下render返回的JSX结构，确保最外层容器标签闭合正确，避免出现结构渲染错误。

内容的提问来源于stack exchange，提问作者Tenzo