創建/創建複選框組件反應原生

我一直在面對本機基本複選框和AsynStorage的一些問題。事實上，AsynStorage默認只接受字符串，但也可以存儲布爾變量，我試圖使用該方法，但我每次都得到一個字符串。儘管複選框只接受布爾變量，但如果嘗試使用字符串並且不顯示覆選框的先前狀態（選中或不選中），則會引發警告。因此，我決定使用TouchbleOpacity創建自己的複選框。那麼你們有沒有想法如何做到這一點？這裏是我想達到的效果：創建/創建複選框組件反應原生

所以，目的是使控制文本的樣式在另一頁，左前一次獲得的複選框複選框設置頁面，爲例：如果我檢查，我改變了頁面，並再次返回到設置頁面，我需要找到它檢查（表示以前的狀態）的代碼是在設置頁面：

toggleStatus() { 
     this.setState({ 
      status: !this.state.status 
     }); 
     AsyncStorage.setItem("myCheckbox",JSON.stringify(this.state.status)); 
    } 
// to get the previous status stored in the AsyncStorage 
componentWillMount(){ 
     AsyncStorage.getItem('myCheckbox').then((value) => { 
      this.setState({ 
       status: value 
      }); 
      if (this.state.status == "false") { 
       this.setState({ 
        check: false 
       }); 
      } 
      else if (this.state.status == "true") { 
       this.setState({ 
        check: true 
       }); 
      } 
      if (this.state.status == null) { 
       this.setState({ 
        check: false 
       }); 
      } 
     }); 
    } 
render { 
return(
... 

          <CheckBox 
           onPress={() => { this.toggleStatus() } 
           checked={ this.state.check }/> 

)}

在其他頁碼：

componentDidMount(){ 
     AsyncStorage.getItem('myCheckbox').then((value) => { 
      JSON.parse(value) 
      this.setState({ 
       status: value 
      }); 

     }); 

    }

此代碼更改後二點擊的狀態，我不知道爲什麼，我在控制檯中這個奇怪的輸出，每次我點擊複選框

來源

2017-05-31 user3521011

我認爲最好看看你從AsyncStorage存儲/檢索數據的方式，而不是重新發明複選框。我將通過'JSON.stringify（myVal）'存儲數據，並使用'JSON.parse（fromStorage）'進行檢索 - 這樣您就可以存儲複雜的對象並維護類型。 –

如果您在AsyncStorage documentation看一看，你可以看到，實際上，方法getItem（）將始終返回一個字符串（在promise中）。

對於AsyncStorage的問題，您應該考慮嘗試使用this method explained here解析返回到布爾值的字符串，然後在本機基本複選框內使用此解析值。

但是，如果你想要做自己的組件，嘗試做這樣的事情：

export default class Checkbox extends Component { 
    constructor(){ 
     super(); 
     this.state = { checked: false } 
    } 

    render(){ 
     return(
     <TouchableOpacity 
     onPress={()=>{ 
      this.setState({ checked : !this.state.checked }); 
     }}  
     > 
      <Image source={this.state.checked ? require('checkedImagePath') : require('uncheckedImagePath')} /> 
     </TouchableOpacity> 
     ); 
    } 
}

您將需要一些樣式設置到該圖像來配置它，你想要的方式。

- 根據您的版本：

我看不到在設置頁面的toggleStatus（）方法無可厚非，但請嘗試更改componentWillMount（）這樣的：

componentWillMount(){ 
    AsyncStorage.getItem('myCheckbox').then((value) => { 
     if (value != null){ 
      this.setState({ 
       check: (value == 'true') 
      }); 
     } 
    }); 
}

然而在其他頁面中，您執行JSON.parse（value）的行不會執行任何操作，只要您不在任何地方存儲結果。

來源

2017-06-01 01:25:28

嘿..其實我真的把狀態存儲爲一個字符串（我做了），然後將其轉換爲字符串..但它是尼特工作，我不知道爲什麼..我也試過你的第二個解決方案和它不會立即改變狀態，它總是返回到檢查的圖片...請檢查我的編輯問題，看看我試過。 – user3521011

創建/創建複選框組件反應原生

回答

相關問題